/* ==========================================================================
   tokens.css — Design token layer
   Authority: PRD v1.1 §14.6 (Visual and Interaction System), NFR-005
   --------------------------------------------------------------------------
   PENDING APPROVAL (TC-012 / DPN-005): The EXACT color, typography, spacing,
   breakpoint, radius, shadow, and motion values below are an accessible,
   WCAG-2.2-AA-compliant working baseline. They are structurally final but
   their exact values require product-owner approval before dependent
   components are accepted (TC-012). Approved values are dropped in here only;
   no component code changes when tokens are finalized.
   All semantic tokens required by §14.6 are present: primary, secondary,
   accent, background, text, border, focus, success, warning, error.
   ========================================================================== */

:root {
  /* --- Palette: considered institutional (raw values) ---
     Deep slate-teal primary for gravitas (not generic navy), warm ochre accent
     used sparingly, near-black slate ink for text. All pairings meet WCAG AA. */
  --color-ink-900: #10202a;      /* text ink */
  --color-ink-700: #14383e;
  --color-ink-500: #276169;
  --color-primary-900: #0f2e33;  /* deep slate-teal brand */
  --color-primary-700: #1c4a51;
  --color-slate-600: #465563;
  --color-slate-500: #5f6d7b;    /* subtle text — AA on paper */
  --color-slate-400: #8b97a3;
  --color-line-300: #d5dbdf;
  --color-line-200: #e7ebee;
  --color-paper-100: #f4f6f6;
  --color-paper-050: #fbfcfc;
  --color-white: #ffffff;
  --color-accent-600: #8a5a1c;   /* warm ochre, sparing */
  --color-accent-500: #a06a22;
  --color-accent-050: #f6efe3;
  --color-success-700: #1f6f43;
  --color-warning-700: #8a5a00;
  --color-error-700:   #a12626;
  --color-info-700:    #1d5a8a;

  /* --- Semantic tokens (required by §14.6) --- */
  --c-primary:        var(--color-primary-900);
  --c-primary-hover:  var(--color-primary-700);
  --c-secondary:      var(--color-slate-600);
  --c-accent:         var(--color-accent-600);
  --c-accent-soft:    var(--color-accent-050);
  --c-bg:             var(--color-white);
  --c-bg-alt:         var(--color-paper-100);
  --c-bg-raised:      var(--color-paper-050);
  --c-text:           var(--color-ink-900);
  --c-text-muted:     var(--color-slate-600);
  --c-text-subtle:    var(--color-slate-500);
  --c-text-invert:    var(--color-white);
  --c-border:         var(--color-line-300);
  --c-border-soft:    var(--color-line-200);
  --c-focus:          #9a6414;  /* accent-derived; >=3:1 on light surfaces */
  --c-focus-on-dark:  #e3b877;  /* focus ring on dark surfaces: >=3:1 on primary */
  --c-success:        var(--color-success-700);
  --c-warning:        var(--color-warning-700);
  --c-error:          var(--color-error-700);
  --c-info:           var(--color-info-700);

  /* Status vocabulary colors (NFR-011): Live/Pilot/In Development/Planned/Archived/Private */
  --c-status-live:        var(--color-success-700);
  --c-status-pilot:       var(--color-info-700);
  --c-status-development: var(--color-warning-700);
  --c-status-planned:     var(--color-slate-500);
  --c-status-archived:    var(--color-slate-500);
  --c-status-private:     var(--color-slate-600);

  /* --- Typography --- */
  /* System font stacks: no third-party font dependency (TC-013, PERF-006). */
  --font-display: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;

  /* Type scale (fluid, clamps prevent overflow at zoom — A11Y-011) */
  --fs-100: 0.833rem;
  --fs-200: 0.9rem;
  --fs-300: 1rem;
  --fs-400: 1.125rem;
  --fs-500: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-600: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --fs-700: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --fs-800: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Spacing scale --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* --- Layout --- */
  --measure: 68ch;            /* readable line length */
  --container-max: 72rem;
  --container-narrow: 48rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  /* --- Radius / shadow / border --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --border-w: 1px;
  --shadow-sm: 0 1px 2px rgba(20, 33, 61, 0.06), 0 1px 3px rgba(20, 33, 61, 0.08);
  --shadow-md: 0 2px 6px rgba(20, 33, 61, 0.08), 0 6px 16px rgba(20, 33, 61, 0.08);

  /* --- Motion (respect reduced motion in reset) --- */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);

  /* --- Focus ring --- */
  --focus-ring: 3px solid var(--c-focus);
  --focus-offset: 2px;

  /* --- z-index scale --- */
  --z-header: 100;
  --z-skiplink: 200;
  --z-menu: 150;
}