/* ---------------------------------------------------------------------------
 * tokens.css — the single source of every colour, font, space and radius.
 *
 * weborder-revamp.md §2.1. Nothing else in the codebase hardcodes a hex value;
 * if a colour is needed that is not here, it is added here first.
 *
 * Palette from [A2]. Light mode only [A2] — there is no dark variant, and the
 * variables are structured so adding one later touches this file alone.
 * ------------------------------------------------------------------------- */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --color-brand:        #660000;
  --color-brand-hover:  #4d0000;   /* darkened for hover/active states */
  --color-brand-soft:   #F2EAEA;   /* brand at low intensity: row hover, tints */
  --color-accent:       #D4AF37;
  --color-muted:        #5C6B73;

  /* --- Surfaces --------------------------------------------------------- */
  --color-bg:           #F9F9FB;
  --color-surface:      #FFFFFF;
  --color-surface-alt:  #F4F4F7;   /* table head, disabled fields, skeletons */
  --color-border:       #E4E4E9;
  --color-border-strong:#CFCFD6;

  /* --- Text ------------------------------------------------------------- */
  --color-heading:      #1A1A1A;
  --color-text:         #333333;
  --color-text-muted:   #5C6B73;
  --color-text-invert:  #FFFFFF;

  /* --- Status: order lifecycle [A7] ------------------------------------- *
   * Deliberately NOT the brand palette. Four states need four visually
   * distinct, conventional colours; reusing brand maroon for "Cancelled"
   * would make a cancelled order look like a primary action.               */
  --color-status-u:     #5C6B73;   /* U — Not Processed    */
  --color-status-p:     #B8860B;   /* P — Processing       */
  --color-status-y:     #1E7B34;   /* Y — Invoice Prepared */
  --color-status-c:     #A02020;   /* C — Cancelled        */

  /* Tinted backgrounds for the same four badges. */
  --color-status-u-bg:  #EDEFF1;
  --color-status-p-bg:  #FBF3DF;
  --color-status-y-bg:  #E6F3EA;
  --color-status-c-bg:  #F8E9E9;

  /* --- Stock availability (item.AVAIL_TAG G/Y/R) ------------------------ */
  --color-avail-g:      #1E7B34;   /* G — available   */
  --color-avail-y:      #B8860B;   /* Y — insufficient */
  --color-avail-r:      #A02020;   /* R — unavailable  */
  --color-avail-none:   #9AA3A8;   /* nothing selected yet */

  /* --- Feedback --------------------------------------------------------- */
  --color-error:        #A02020;
  --color-error-bg:     #F8E9E9;
  --color-success:      #1E7B34;
  --color-success-bg:   #E6F3EA;
  --color-info:         #245C7A;
  --color-info-bg:      #E8F1F6;

  /* --- Type [C4] -------------------------------------------------------- *
   * Cinzel      brand wordmark only, nothing else
   * Plus Jakarta headings and nav
   * Inter       tables, numeric cells, form inputs (has tabular figures)
   * Open Sans   body copy, help text, empty states                         */
  --font-brand:    'Cinzel', Georgia, 'Times New Roman', serif;
  --font-heading:  'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-table:    'Inter', system-ui, -apple-system, sans-serif;
  --font-body:     'Open Sans', system-ui, -apple-system, sans-serif;
  --font-mono:     ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   26px;
  --text-2xl:  34px;

  --leading-tight: 1.25;
  --leading-body:  1.6;

  /* --- Space: 4px base -------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* --- Shape and depth -------------------------------------------------- */
  --radius:     6px;
  --radius-sm:  4px;
  --radius-pill: 999px;
  --shadow-sm:  0 1px 2px rgba(26, 26, 26, .06);
  --shadow-md:  0 2px 8px rgba(26, 26, 26, .08);
  --shadow-lg:  0 12px 32px rgba(26, 26, 26, .18);

  /* --- Layout ----------------------------------------------------------- */
  --page-max:   1440px;
  --header-h:   64px;

  /* --- Motion ----------------------------------------------------------- */
  --ease:       cubic-bezier(.2, .6, .3, 1);
  --dur-fast:   120ms;
  --dur:        200ms;

  /* --- Focus ------------------------------------------------------------ *
   * Gold is a non-text accent [A2 note] — a focus ring is exactly the kind
   * of non-text use it passes contrast for.                                */
  --focus-ring: 2px solid var(--color-accent);
  --focus-offset: 2px;

  --z-header:  100;
  --z-dialog:  400;
  --z-overlay: 900;
}

/* Respect a user's reduced-motion setting everywhere at once. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
  }
}