/* ---------------------------------------------------------------------------
   MCAD design tokens — staff interface.

   The staff pages previously used 85 distinct colours, including 19
   near-duplicate greys and a hot pink accent (#ff00aa) that appears nowhere in
   the division's own identity. These values are sampled from the actual MCAD
   logo, so the system now looks like the office it belongs to.

   Sampled from assets/img/mcad-logo.jpg:
     deep green  #183225  #1B3627
     mid green   #375847
     bronze gold #A58049
     light gold  #DEC489

   Loaded FIRST, so every later stylesheet can use these.

   Note on the two themes: the public pages follow the Philippine government
   GWTD (white content, flag blue) because that standard governs public
   government websites. The staff pages are internal tooling, which GWTD does
   not cover, and stay dark deliberately — someone with both open can tell at
   a glance which side they are on.
--------------------------------------------------------------------------- */

:root {
    /* ── Green, from the logo ──────────────────────────────────────────── */
    --mcad-green-900: #0F2118;
    --mcad-green-800: #183225;   /* logo deep green */
    --mcad-green-700: #1B3627;
    --mcad-green-600: #2A4736;
    --mcad-green-500: #375847;   /* logo mid green */
    --mcad-green-400: #4E7A62;
    --mcad-green-300: #6FA588;   /* lightened until readable on dark */

    /* ── Gold, from the logo ───────────────────────────────────────────── */
    --mcad-gold-700: #7A5E35;
    --mcad-gold-600: #A58049;    /* logo bronze */
    --mcad-gold-500: #C9A45F;
    --mcad-gold-400: #DEC489;    /* logo light gold */
    --mcad-gold-300: #EBD9AE;

    /* ── Surfaces ──────────────────────────────────────────────────────── */
    --s-bg:        #121212;
    --s-surface:   #1E1E1E;
    --s-surface-2: #252525;
    /* Borders carry a green tint rather than neutral grey, so the palette
       reads as one family instead of "dark theme plus an accent". */
    --s-border:    #2C3A33;
    --s-border-2:  #3A4A41;

    /* Measured against the surfaces above, not chosen by eye. Ratios on
       --s-surface #1E1E1E:  text 15.5:1,  muted 6.58:1,  faint 4.91:1.
       --s-faint was #6B7772, which is 3.58:1 — below the 4.5:1 that WCAG 1.4.3
       requires for normal-size text, and it is used for exactly that (12px
       timestamps, table sub-lines, meta rows). Lightened to the nearest value
       in the same green-tinted family that passes, so the change is visible
       only if you compare them side by side. */
    --s-text:      #E8EAE9;
    --s-muted:     #9BA5A0;
    --s-faint:     #828E89;

    /* ── Accent ────────────────────────────────────────────────────────── */
    /* Gold, not green, is the accent on a dark ground: the logo's deep green
       is almost invisible against #121212, while the gold carries roughly
       10:1 contrast. The green comes back as the surface and border family. */
    --s-accent:       var(--mcad-gold-500);
    --s-accent-light: var(--mcad-gold-400);
    --s-accent-dim:   var(--mcad-gold-600);
    --s-on-accent:    var(--mcad-green-900);   /* text ON a gold button */

    /* rgb triplets so rgba() can use the same values for tints */
    --s-accent-rgb: 201, 164, 95;
    --s-green-rgb:  55, 88, 71;

    /* ── Status ────────────────────────────────────────────────────────── */
    /* Kept distinct from the brand: status must never be confused with
       decoration, and green-on-green would do exactly that. */
    --s-success: #4ade80;
    --s-warn:    #fbbf24;
    --s-danger:  #f87171;
    --s-info:    #60a5fa;

    --s-success-bg: rgba(22,163,74,.18);
    --s-warn-bg:    rgba(217,119,6,.18);
    --s-danger-bg:  rgba(220,38,38,.18);
    --s-info-bg:    rgba(37,99,235,.18);

    /* ── Shape ─────────────────────────────────────────────────────────── */
    --s-radius:    10px;
    --s-radius-sm: 8px;
    --s-shadow:    0 2px 10px rgba(0,0,0,.35);
}

/* The brand gradient, used for the primary action and the masthead. */
.mcad-gradient,
.brand-gradient {
    background: linear-gradient(135deg, var(--mcad-gold-400), var(--mcad-gold-600));
}