/* ============================================================
 * HSD Design Tokens — v2 (mockup v5 alignment)
 *
 * Source of truth for the HSD visual language.
 * Tokens carry BOTH prefixed (--hsd-navy) and bare (--navy)
 * names so we can paste mockup-v5 CSS verbatim AND keep
 * pre-existing references intact.
 *
 * Layer order:
 *   reset → tokens → theme → components → overrides
 * ============================================================ */

@layer reset, tokens, theme, components, overrides;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  body,
  h1, h2, h3, h4, h5, h6,
  p, ul, ol, figure {
    margin: 0;
  }
  ul, ol { padding: 0; list-style: none; }
}

@layer tokens {
  :root {
    /* ------------------------------------------------------------
     * Brand — navy + cyan are the only true brand colors.
     * Everything else is a derivative (dark/soft/line) for depth.
     * ------------------------------------------------------------ */
    --navy:        #0A1F6B;
    --navy-dark:   #061551;
    --navy-soft:   #E6E8F0;
    --navy-line:   #C6CBDA;

    --cyan:        #00B7D4;
    --cyan-dark:   #0095AC;
    --cyan-soft:   #DFF6FA;

    /* ------------------------------------------------------------
     * Surfaces / background
     * ------------------------------------------------------------ */
    --bg:          #FAFAF7;   /* page background — off-white */
    --bg-panel:    #FFFFFF;   /* cards / containers */
    --bg-soft:     #F4F4EF;   /* tinted regions */
    --bg-hover:    #EFEFE9;

    /* ------------------------------------------------------------
     * Ink / text
     * ------------------------------------------------------------ */
    --ink:         #18181B;
    --ink-soft:    #3F3F46;
    --ink-muted:   #71717A;
    --ink-faint:   #A1A1AA;

    /* ------------------------------------------------------------
     * Borders
     * ------------------------------------------------------------ */
    --border:        #E4E4DC;
    --border-strong: #D2D2C7;

    /* ------------------------------------------------------------
     * Document / project state palette
     * Each state has a foreground; some have a tinted background
     * for full-pill rendering.
     * ------------------------------------------------------------ */
    --st-draft:        #A1A1AA;
    --st-pending:      #C58A2D;
    --st-pending-bg:   #FBF1E0;
    --st-review:       #0095AC;   /* same as --cyan-dark */
    --st-approved:     #4F8A52;
    --st-rejected:     #C04A2A;
    --st-rejected-bg:  #FCE4DD;

    /* ------------------------------------------------------------
     * Typography
     * ------------------------------------------------------------ */
    --font-sans:   'Geist', system-ui, -apple-system, sans-serif;
    --font-mono:   'Geist Mono', ui-monospace, SFMono-Regular, monospace;

    /* ------------------------------------------------------------
     * Layout dimensions
     * ------------------------------------------------------------ */
    --sidebar-w:   240px;
    --topbar-h:    53px;
    --page-max-w:  1680px;

    /* ------------------------------------------------------------
     * Motion
     * ------------------------------------------------------------ */
    --transition-fast: 0.12s;
    --transition-base: 0.15s;

    /* ------------------------------------------------------------
     * Legacy prefixed aliases — pre-existing CSS references
     * (Phase 1-7) continue to resolve. Do NOT add new references
     * to these; use the bare tokens for new code.
     * ------------------------------------------------------------ */
    --hsd-navy:           var(--navy);
    --hsd-navy-dark:      var(--navy-dark);
    --hsd-navy-soft:      var(--navy-soft);
    --hsd-navy-line:      var(--navy-line);
    --hsd-cyan:           var(--cyan);
    --hsd-cyan-dark:      var(--cyan-dark);
    --hsd-cyan-soft:      var(--cyan-soft);
    --hsd-bg:             var(--bg);
    --hsd-surface:        var(--bg-panel);
    --hsd-bg-soft:        var(--bg-soft);
    --hsd-bg-hover:       var(--bg-hover);
    --hsd-text:           var(--ink);
    --hsd-muted:          var(--ink-muted);
    --hsd-ink-soft:       var(--ink-soft);
    --hsd-ink-faint:      var(--ink-faint);
    --hsd-border:         var(--border);
    --hsd-border-strong:  var(--border-strong);
    --hsd-danger:         var(--st-rejected);
    --hsd-warn:           var(--st-pending);
    --hsd-ok:             var(--st-approved);
    --hsd-st-draft:       var(--st-draft);
    --hsd-st-pending:     var(--st-pending);
    --hsd-st-pending-bg:  var(--st-pending-bg);
    --hsd-st-review:      var(--st-review);
    --hsd-st-approved:    var(--st-approved);
    --hsd-st-rejected:    var(--st-rejected);
    --hsd-st-rejected-bg: var(--st-rejected-bg);
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --shadow-sm: 0 1px 2px rgba(10, 31, 107, 0.05);
    --shadow-md: 0 4px 12px rgba(10, 31, 107, 0.08);

    /* Spacing scale used by some Phase 3-7 styles */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 14px;
    --space-5: 16px;
    --space-6: 18px;
    --space-7: 20px;
    --space-8: 24px;
    --space-9: 28px;
    --space-10: 32px;
    --space-12: 40px;
  }
}