@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');

/* ============================================================
   Cam Booth web redesign — design tokens + shared chrome styles
   Layered on top of Bootstrap 5 (local: ~/lib/bootstrap/dist).
   Phase 1 foundation. Page-specific styles come later per phase.
   ============================================================ */

:root {
    /* Default font: Sarabun (Thai-friendly). The `body` rule below overrides
       Bootstrap's system-font stack site-wide (redesign.css loads after
       bootstrap.css, so it wins by source order); the --bs-* vars cover
       Bootstrap 5.2+ which reads font-family from CSS variables. */
    --cb-font-sans: 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-font-sans-serif: var(--cb-font-sans);
    --bs-body-font-family: var(--cb-font-sans);

    /* Brand palette (Happy Metal — steel blue + amber accent) */
    --cb-primary: #2b6cb0;
    --cb-primary-dark: #234e7d;
    --cb-accent: #f5a623;
    --cb-ink: #1a202c;
    --cb-muted: #6b7280;
    --cb-bg: #f7fafc;
    --cb-surface: #ffffff;
    --cb-border: #e2e8f0;

    /* Spacing / shape */
    --cb-radius: 0.6rem;
    --cb-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.06);
    --cb-maxw: 1200px;
}

/* Apply Sarabun site-wide. font-family inherits, so headings, buttons,
   inputs, tables, etc. all follow without per-component rules. */
body {
    font-family: var(--cb-font-sans);
}

/* Map Bootstrap's primary onto the brand color without recompiling SCSS. */
.btn-primary {
    --bs-btn-bg: var(--cb-primary);
    --bs-btn-border-color: var(--cb-primary);
    --bs-btn-hover-bg: var(--cb-primary-dark);
    --bs-btn-hover-border-color: var(--cb-primary-dark);
    --bs-btn-active-bg: var(--cb-primary-dark);
}

.text-brand { color: var(--cb-primary) !important; }
.bg-brand { background-color: var(--cb-primary) !important; }

body.cb-app {
    background: var(--cb-bg);
    color: var(--cb-ink);
}

.cb-container { max-width: var(--cb-maxw); }

/* ---- Header ---- */
.cb-header {
    background: var(--cb-surface);
    border-bottom: 1px solid var(--cb-border);
}
.cb-header .navbar-brand { font-weight: 700; color: var(--cb-primary); }

/* ---- Role sub-menu bar ---- */
.cb-submenu {
    background: var(--cb-primary);
}
.cb-submenu .nav-link { color: rgba(255, 255, 255, 0.85); }
.cb-submenu .nav-link:hover,
.cb-submenu .nav-link.active { color: #fff; }

/* ---- Breadcrumb ---- */
.cb-breadcrumb {
    background: transparent;
    font-size: 0.9rem;
}

/* ---- Call to action ---- */
.cb-cta {
    background: linear-gradient(135deg, var(--cb-primary), var(--cb-primary-dark));
    color: #fff;
    border-radius: var(--cb-radius);
}
.cb-cta a.btn { font-weight: 600; }

/* ---- Footer ---- */
.cb-footer {
    background: var(--cb-ink);
    color: #cbd5e1;
}
.cb-footer a { color: #e2e8f0; text-decoration: none; }
.cb-footer a:hover { color: #fff; text-decoration: underline; }
.cb-footer h6 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.8rem;
}