/* ---------------------------------------------------------------
   theme.css - design tokens for the signed-out screens.

   Loaded by:
     templates/RAMS/users/login.html    (sign in)
     templates/account/auth_base.html   (register, OTP verify)

   The signed-in shells - RAMS/base/base.html and
   account/adminportalbase.html - deliberately do NOT load this. They
   keep their own inline chrome and the per-area token sets in
   navbar.css, tables.css and account/*.css. Linking this file there
   would restyle every signed-in page, so only do it if that is the
   intent.

   Load it BEFORE account/auth.css, which declares its own --auth-*
   values and should win.
   --------------------------------------------------------------- */

:root {
    /* ── Brand ramp ───────────────────────────────────────────── */
    --brand-50:  #f2f6fb;
    --brand-100: #e0eaf5;
    --brand-200: #bcd0e8;
    --brand-300: #8badd4;
    --brand-400: #5480b0;
    --brand-500: #2c5282;   /* primary */
    --brand-600: #25466e;
    --brand-700: #1f3c62;   /* hover / pressed */
    --brand-800: #172d4a;
    --brand-900: #101f33;

    --brand:      var(--brand-500);
    --brand-dark: var(--brand-700);
    --brand-tint: #ebf4ff;

    /* ── Accent ramp (teal) ───────────────────────────────────────
       The second voice: active indicators, focus rings, badges and
       the primary CTA's highlight. Navy still owns the chrome.

       Contrast is measured, not guessed - use the right step:
         --accent-600  text / solid fills on WHITE      (5.47:1)
         --accent-600  text on --brand-tint             (4.93:1)
         --accent-400  text / icons on the NAVY panel   (6.00:1)
         --accent-400/500 decorative only on light
                       (1.86 / 2.49:1 - never body text)
       Teal is deliberately not amber: --warning below is already
       amber and the two would read as the same signal. */
    --accent-50:  #f0fdfa;
    --accent-100: #ccfbf1;
    --accent-200: #99f6e4;
    --accent-300: #5eead4;
    --accent-400: #2dd4bf;
    --accent-500: #14b8a6;
    --accent-600: #0f766e;
    --accent-700: #115e59;

    --accent:      var(--accent-600);
    --accent-glow: var(--accent-400);
    --accent-tint: var(--accent-50);

    /* ── Neutrals (ink + surface) ─────────────────────────────── */
    --ink-900: #1a202c;
    --ink-700: #23343b;
    --ink-500: #4a5568;
    --ink-400: #6b7c85;
    --ink-300: #a0aec0;

    --surface:        #ffffff;
    --surface-muted:  #f7fafc;
    --surface-sunken: #fafbfc;
    --border:         #e3e8ec;
    --border-strong:  #ccd6db;

    /* ── Status ───────────────────────────────────────────────── */
    --success:     #1c6b38;
    --success-bg:  #e9f6ee;
    --warning:     #b7791f;
    --warning-bg:  #fffaf0;
    --danger:      #c53030;
    --danger-bg:   #fff5f5;
    --danger-border: #fed7d7;

    /* ── Radii ────────────────────────────────────────────────── */
    --radius-sm: 6px;
    --radius:    8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    /* ── Elevation ────────────────────────────────────────────── */
    --shadow-sm: 0 1px 3px rgba(16, 40, 51, .06);
    --shadow:    0 2px 8px rgba(16, 40, 51, .08);
    --shadow-md: 0 8px 24px rgba(16, 40, 51, .10);
    --shadow-lg: 0 18px 48px rgba(16, 40, 51, .14);
    --shadow-xl: 0 32px 80px rgba(16, 40, 51, .18);
    --ring:      0 0 0 .2rem rgba(44, 82, 130, .35);
    --ring-soft: 0 0 0 3px rgba(44, 82, 130, .15);
    --ring-accent: 0 0 0 3px rgba(20, 184, 166, .28);

    /* ── Typography ───────────────────────────────────────────── */
    --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --text-xs: .72rem;
    --text-sm: .82rem;
    --text-base: .9rem;
    --text-lg: 1.05rem;
    --text-xl: 1.4rem;

    /* ── Layout ───────────────────────────────────────────────── */
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 80px;
    --navbar-height: 64px;

    /* ── Motion ───────────────────────────────────────────────── */
    --ease: cubic-bezier(.22, 1, .36, 1);
    --transition: .2s var(--ease);
}

/* ── Base ─────────────────────────────────────────────────────── */
body {
    font-family: var(--font-sans);
    color: var(--ink-700);
    background-color: var(--surface);
}

/* ── Buttons ──────────────────────────────────────────────────────
   Bootstrap's .btn:hover recomputes background/colour from CSS vars
   it never set for custom classes, which blanks a brand button out
   on hover. Every state is pinned. */
.btn {
    border-radius: var(--radius-sm) !important;
    font-weight: 500;
    transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

/* ── Cards / panels ───────────────────────────────────────────── */
.surface-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* ── Form controls ────────────────────────────────────────────── */
.form-control,
.form-select {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand);
    box-shadow: var(--ring-soft);
}

.form-label {
    font-weight: 600;
    font-size: .875rem;
    color: var(--ink-700);
    margin-bottom: .35rem;
}

/* ── Dropdowns ────────────────────────────────────────────────── */
.dropdown-menu {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}

/* ── Scrollbar ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface-muted); }
::-webkit-scrollbar-thumb {
    background: var(--brand-300);
    border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--brand); }