/*
 * AiPEX design tokens — the single source of brand truth.
 *
 * Every colour, size, and brand element in this application resolves to a variable
 * declared here. No stylesheet outside this file may contain a hex literal, and
 * tools/check-tokens.mjs fails the build if one appears.
 *
 * The first five values are the public DoD brand palette. AiPEX Midnight and the
 * semantic status colours are PROPOSED APPLICATION COLOURS and must not be
 * presented as official USCYBERCOM colours.
 *
 * The JPERSTAT purple and burnt-orange palette is not used here and is denied by
 * the token check.
 */

:root {
  /* ---- DoD brand palette ---- */
  --dod-blue:       #355E93;
  --dod-steel-blue: #AEBFD4;
  --dod-black:      #141414;
  --dod-white:      #FFFFFF;
  --dod-smoke-gray: #ADADAD;

  /* ---- Proposed AiPEX application colour (NOT an official USCYBERCOM colour) ---- */
  --aipex-midnight: #0B1F33;

  /* ---- Proposed semantic status colours (NOT official). Contrast on white noted. ---- */
  --status-action:   #8A4B08;  /* Your action required           5.9:1 */
  --status-progress: #355E93;  /* USCYBERCOM action in progress  6.4:1 */
  --status-complete: #1E6B44;  /* Completed                      5.3:1 */
  --status-idle:     #4A5568;  /* No action currently required   7.6:1 */
  --status-closed:   #6B2E2E;  /* Not selected / withdrawn       8.0:1 */

  /* ---- Semantic roles ---- */
  --color-canvas:        var(--dod-white);
  --color-surface:       #F7F9FC;
  --color-surface-sunk:  #EDF1F7;
  --color-border:        #C9D3E0;
  --color-border-strong: var(--dod-steel-blue);
  --color-text:          var(--dod-black);
  /* Smoke gray is 2.3:1 on white — borders and disabled fills only, never text. */
  --color-text-muted:    #4A5568;
  --color-text-inverse:  var(--dod-white);
  --color-accent:        var(--dod-blue);
  --color-accent-hover:  #2A4A75;
  --color-header-bg:     var(--aipex-midnight);
  /* The masthead and classification banner sit on AiPEX Midnight in BOTH themes,
     so their foreground must NOT flip with the theme. --color-text-inverse does
     flip (it is "the opposite of the page"), which is why it must never be used
     on these surfaces. */
  --color-on-header:     var(--dod-white);
  --color-focus:         #B8860B;
  --color-danger:        #8B1A1A;
  --color-danger-bg:     #FDF2F2;
  --color-info-bg:       #EFF4FA;
  --color-warn-bg:       #FDF6EC;
  --color-ok-bg:         #EEF7F1;

  /* ---- Type ---- */
  --font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --font-size-base: 1rem;
  --line-height-base: 1.6;
  --measure: 68ch;

  /* ---- Space / shape ---- */
  --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem;   --space-7: 3rem;
  --radius: 6px; --radius-lg: 10px;
  --shadow-1: 0 1px 2px rgba(20, 20, 20, .08), 0 1px 3px rgba(20, 20, 20, .06);

  /* ---- Layout ---- */
  --rail-width: 232px;
  /* Wide enough that a two-sidebar page (profile index + form, job filters +
     results) still gets a usable content column. Prose stays capped by --measure. */
  --content-max: 1320px;
  --touch-target: 44px;

  /* ---- Brand slots ----
     No approved AiPEX logo and no approved seal asset exist (Assumption A-20).
     A text wordmark is used and the seal slot renders nothing. When approved
     artwork is supplied, set --brand-seal-url here and nowhere else. */
  --brand-wordmark: "AiPEX";
  --brand-seal-url: none;
}

/* ---------------------------------------------------------------------------
 * Theme.
 *
 * Three states, chosen by the candidate: light, dark, or follow the device.
 * Only the semantic roles are re-bound — the DoD palette values above are never
 * altered, so the brand is identical in both themes.
 *
 * The dark accents are lightened versions of DoD Blue rather than a different hue,
 * because #355E93 on a dark canvas is 2.4:1 and unreadable. The palette is honoured;
 * the contrast requirement wins where they conflict.
 * ------------------------------------------------------------------------- */

/* Shared dark values, applied either by explicit choice or by device preference. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-canvas:        #0E1620;
    --color-surface:       #16202C;
    --color-surface-sunk:  #1D2836;
    --color-border:        #34455C;
    --color-border-strong: #4C6288;
    --color-text:          #F2F5F9;
    --color-text-muted:    #B7C3D2;
    --color-text-inverse:  #0E1620;
    --color-accent:        #8FB0DA;
    --color-accent-hover:  #B3CCE8;
    --color-header-bg:     var(--aipex-midnight);
    --color-focus:         #F0C64B;
    --color-info-bg:       #16283C;
    --color-warn-bg:       #2E2515;
    --color-ok-bg:         #14281F;
    --color-danger-bg:     #2C1A1A;
    --color-danger:        #F0A0A0;
    --status-action:       #E8B071;
    --status-progress:     #8FB0DA;
    --status-complete:     #6FC49A;
    --status-idle:         #B7C3D2;
    --status-closed:       #E5A0A0;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
  }
}

/* Explicit dark choice — wins regardless of the device setting. */
:root[data-theme="dark"] {
  --color-canvas:        #0E1620;
  --color-surface:       #16202C;
  --color-surface-sunk:  #1D2836;
  --color-border:        #34455C;
  --color-border-strong: #4C6288;
  --color-text:          #F2F5F9;
  --color-text-muted:    #B7C3D2;
  --color-text-inverse:  #0E1620;
  --color-accent:        #8FB0DA;
  --color-accent-hover:  #B3CCE8;
  --color-header-bg:     var(--aipex-midnight);
  --color-focus:         #F0C64B;
  --color-info-bg:       #16283C;
  --color-warn-bg:       #2E2515;
  --color-ok-bg:         #14281F;
  --color-danger-bg:     #2C1A1A;
  --color-danger:        #F0A0A0;
  --status-action:       #E8B071;
  --status-progress:     #8FB0DA;
  --status-complete:     #6FC49A;
  --status-idle:         #B7C3D2;
  --status-closed:       #E5A0A0;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
}

/* Explicit light choice — wins even when the device prefers dark. */
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}