/* ==========================================================================
   ROLE: STANDARD - every design token, with WIREFRAME values.

   tokens.css — the full list of design values app.css uses. Loaded first by every
   shell. On its own it IS the wireframe theme: black, white and greys, system fonts, square
   corners, no shadows. A theme in css/themes/ loads after it and overrides only the
   tokens it changes, so every theme always has every token.

   Add a token here (with a neutral value) before app.css uses it. Never put a rule
   here, only values. Layout dimensions (rail width, topbar height) are not tokens: they
   live at the top of app.css.
   ========================================================================== */

:root {
  /* --- Brand: the accent ramp (rail, primary buttons, links, focus) ---------- */
  --brand-50:  #F2F2F2;
  --brand-100: #E6E6E6;
  --brand-200: #CCCCCC;
  --brand-500: #525252;
  --brand-600: #000000;
  --brand-700: #000000;
  --brand-800: #1A1A1A;
  --brand-900: #000000;

  /* --- Neutrals: text, borders, backgrounds ---------------------------------- */
  --slate-50:  #FAFAFA;
  --slate-100: #F2F2F2;
  --slate-200: #E0E0E0;
  --slate-300: #C6C6C6;
  --slate-400: #8D8D8D;
  --slate-500: #6F6F6F;
  --slate-600: #525252;
  --slate-700: #393939;
  --slate-800: #262626;
  --slate-900: #000000;
  --page-bg:   #FFFFFF;

  /* --- Status: tint (light bg) / ink (text) / border / solid -----------------
     No colour in the wireframe: status reads from the badge text and icon. */
  --danger-600:    #000000;
  --danger-700:    #000000;
  --danger-tint:   #F2F2F2;
  --danger-border: #000000;

  --success-500:    #525252;
  --success-600:    #000000;
  --success-tint:   #F2F2F2;
  --success-ink:    #000000;
  --success-border: #8D8D8D;

  --warning-500:    #8D8D8D;
  --warning-tint:   #F2F2F2;
  --warning-ink:    #000000;
  --warning-border: var(--warning-500);

  --info-tint:   #F2F2F2;
  --info-ink:    #000000;
  --info-border: #8D8D8D;

  /* Light or dark: tells the browser how to draw native parts (scrollbars, date pickers,
     select menus). A dark theme sets it to dark. */
  --color-scheme: light;

  /* --- Chart series, in order (js/chart.js). Six steps; a seventh series repeats the first. */
  --chart-1: #000000;
  --chart-2: #6F6F6F;
  --chart-3: #A8A8A8;
  --chart-4: #393939;
  --chart-5: #8D8D8D;
  --chart-6: #C6C6C6;

  /* --- Surface & on-color text ----------------------------------------------
     --surface: background of "paper" containers (cards, docs, panels, inputs).
     --on-brand / --on-brand-rgb: text/icon/overlay color on a brand or status
     background (buttons, active rail item). Separate from --surface because a theme
     can need a dark surface with light on-brand text, or the reverse. */
  --surface: #FFFFFF;
  --on-brand: #FFFFFF;
  --on-brand-rgb: 255, 255, 255;

  /* Base RGB triple behind every shadow and backdrop overlay. */
  --overlay-rgb: 0, 0, 0;

  /* --- Shape ----------------------------------------------------------------- */
  --radius-card: 0;
  --radius-ctl:  0;

  /* --- Elevation: a plain outline instead of a shadow --------------------------- */
  --shadow-card:  none;
  --shadow-raise: 0 0 0 1px rgb(var(--overlay-rgb));
  --shadow-modal: 0 0 0 1px rgb(var(--overlay-rgb));

  /* --- Type: the system's own fonts. A theme that loads web fonts @imports them. */
  --font-sans:    system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-serif:   var(--font-sans);   /* headings */
  /* Amounts, quantities, dates. Sans with tabular digits still lines columns up;
     set to var(--font-mono) for a typed-ledger look. Codes (PO no., refs) stay mono. */
  --font-numeric: var(--font-sans);

  /* Overall size. Every size in Symphony is in rem, so this one value scales text,
     spacing, controls and icons together: 93.75% is compact, 106.25% is roomy. */
  --root-size: 100%;

  /* Type scale — named by px size, derived from every font-size value in use. */
  --text-9:  .5625rem;
  --text-10: .625rem;
  --text-11: .6875rem;
  --text-12: .75rem;
  --text-13: .8125rem;  /* body default */
  --text-14: .875rem;
  --text-15: .9375rem;
  --text-16: 1rem;
  --text-18: 1.125rem;
  --text-22: 1.375rem;
  --text-28: 1.75rem;
  /* Table typography. Table text matches the 13px body; monospace codes sit one step
     smaller because monospace runs wide. Lower --table-text-size for a denser grid. */
  --table-text-size: var(--text-13);
  --table-mono-size: var(--text-12);

  /* Spacing scale — named by px size, derived from every padding/margin/gap
     value in use. Deliberately not rounded onto a coarser 4/8px grid: several
     values here (5px, 7px, 18px, 34px) are real, intentional fine-tuning in the
     existing design (icon offsets, badge dot sizes) and forcing them onto a
     coarser scale would visibly shift the layout. */
  --space-1:  .0625rem;
  --space-2:  .125rem;
  --space-4:  .25rem;
  --space-5:  .3125rem;
  --space-6:  .375rem;
  --space-7:  .4375rem;
  --space-8:  .5rem;
  --space-10: .625rem;
  --space-12: .75rem;
  --space-14: .875rem;
  --space-16: 1rem;
  --space-18: 1.125rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-28: 1.75rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  /* Table density. Row padding, and the size of icon buttons in table rows — those buttons,
     not the text, set the row height, so both must shrink for compact rows
     (e.g. --table-row-py: var(--space-4); --table-action-size: 1.5rem). */
  --table-row-py: var(--space-7);
  --table-action-size: var(--control-sm);

  /* Icon sizes — separate from the type scale so a theme can enlarge text
     without every icon growing with it (or the reverse). */
  --icon-xs:  .75rem;
  --icon-sm:  .875rem;
  --icon-md:  1rem;
  --icon-lg:  1.125rem;
  --icon-xl:  1.25rem;
  --icon-2xl: 2rem;

  /* Control heights — buttons, inputs, selects, icon buttons. The main density
     lever: a roomier theme raises these, a compact one lowers them. */
  --control-xs: 1.625rem;
  --control-sm: 1.75rem;
  --control-md: 1.875rem;
  --control-lg: 2.25rem;
}