/* QIMS 9000 — design tokens
 *
 * Specified in `design/14-design-system.md`. Colour ramps below are derived
 * from the brand anchor by `build/palette.py`; everything else is authored.
 *
 *   py build/palette.py --check    verify the ramps and their contrast
 *   py build/palette.py --css      rewrite the generated block
 *
 * No framework is assumed. These are custom properties and the components that
 * use them are plain CSS, because the front-end stack is not decided — D-07,
 * D-59 and D-60 are Tier 1 and open — and a design system that picks one would
 * be making that decision by the back door.
 */

:root {
  /* ramps: generated */
  --qims-blue-50: #EEF8FF;
  --qims-blue-100: #DDEFFF;
  --qims-blue-200: #C0DDFF;
  --qims-blue-300: #A0C7FD;
  --qims-blue-400: #7CABED;
  --qims-blue-500: #5C91D8;
  --qims-blue-600: #4073B8;
  --qims-blue-700: #31609F;
  --qims-blue-800: #224A7E;
  --qims-blue-900: #15335B;
  --qims-neutral-50: #F7F7F9;
  --qims-neutral-100: #EBEDEF;
  --qims-neutral-200: #D8DBDE;
  --qims-neutral-300: #C1C4C9;
  --qims-neutral-400: #A6AAAF;
  --qims-neutral-500: #8B8F96;
  --qims-neutral-600: #72777C;
  --qims-neutral-700: #5C6065;
  --qims-neutral-800: #474A4E;
  --qims-neutral-900: #313437;
  --qims-success-50: #EEFBF3;
  --qims-success-100: #DCF4E5;
  --qims-success-200: #BFE6CF;
  --qims-success-300: #9DD3B4;
  --qims-success-400: #77BB95;
  --qims-success-500: #55A279;
  --qims-success-600: #3A8861;
  --qims-success-700: #266F4C;
  --qims-success-800: #18573A;
  --qims-success-900: #0D3D27;
  --qims-warning-50: #FFF5E8;
  --qims-warning-100: #FFE9D1;
  --qims-warning-200: #F7D4AD;
  --qims-warning-300: #EABA83;
  --qims-warning-400: #D69C55;
  --qims-warning-500: #BF8029;
  --qims-warning-600: #A46700;
  --qims-warning-700: #885100;
  --qims-warning-800: #6C3E00;
  --qims-warning-900: #4D2A00;
  --qims-danger-50: #FFF0EB;
  --qims-danger-100: #FFE0D7;
  --qims-danger-200: #FFC5B8;
  --qims-danger-300: #FFA494;
  --qims-danger-400: #FC7F6D;
  --qims-danger-500: #E65C4B;
  --qims-danger-600: #C84132;
  --qims-danger-700: #A92B1F;
  --qims-danger-800: #861C13;
  --qims-danger-900: #611009;
  /* end ramps */

  /* Semantic surfaces. Components never name a ramp step directly; they name
     one of these, so a re-theme is a change here and nowhere else. */
  --qims-surface: #FFFFFF;
  --qims-surface-raised: var(--qims-neutral-50);
  --qims-surface-sunken: var(--qims-neutral-100);
  --qims-surface-inverse: var(--qims-neutral-900);
  --qims-surface-brand: var(--qims-blue-600);
  --qims-surface-brand-subtle: var(--qims-blue-50);

  --qims-text: var(--qims-neutral-900);          /* 12.52:1 on surface */
  --qims-text-secondary: var(--qims-neutral-700); /*  6.33:1 */
  --qims-text-inverse: #FFFFFF;
  --qims-text-link: var(--qims-blue-700);        /*  6.36:1 */
  --qims-text-on-brand: #FFFFFF;                 /*  4.81:1 on blue-600 */

  --qims-border: var(--qims-neutral-300);
  --qims-border-strong: var(--qims-neutral-400);
  --qims-border-brand: var(--qims-blue-600);

  /* Status. Each is a text colour and a subtle fill; the pair is what a badge
     uses. D-62 forbids colour as the only signal, so every component built on
     these also carries a label — see the .qims-badge rules. */
  --qims-success-text: var(--qims-success-700);
  --qims-success-fill: var(--qims-success-100);
  --qims-warning-text: var(--qims-warning-700);
  --qims-warning-fill: var(--qims-warning-100);
  --qims-danger-text: var(--qims-danger-700);
  --qims-danger-fill: var(--qims-danger-100);
  --qims-info-text: var(--qims-blue-700);
  --qims-info-fill: var(--qims-blue-100);
  --qims-neutral-text: var(--qims-neutral-700);
  --qims-neutral-fill: var(--qims-neutral-100);

  /* Document status. The deck names five colours and no words; D-62 is why the
     words exist. Under revision is one state in the deck's blue/green/purple,
     which is three colours for one meaning -- see 14-design-system.md. */
  --qims-doc-draft-text: var(--qims-info-text);
  --qims-doc-draft-fill: var(--qims-info-fill);
  --qims-doc-current-text: var(--qims-success-text);
  --qims-doc-current-fill: var(--qims-success-fill);
  --qims-doc-due-text: var(--qims-warning-text);
  --qims-doc-due-fill: var(--qims-warning-fill);
  --qims-doc-overdue-text: var(--qims-danger-text);
  --qims-doc-overdue-fill: var(--qims-danger-fill);
  --qims-doc-obsolete-text: var(--qims-neutral-text);
  --qims-doc-obsolete-fill: var(--qims-neutral-fill);

  /* Type. A system stack commits to nothing: no webfont is chosen, because a
     font is a licensing decision and nobody has made one. The mark itself is
     Arial-adjacent, so the stack sits close to it. */
  --qims-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --qims-font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas,
                    monospace;

  --qims-text-xs: 0.75rem;    /* 12px — table meta, counters */
  --qims-text-sm: 0.875rem;   /* 14px — secondary, dense tables */
  --qims-text-base: 1rem;     /* 16px — body, inputs */
  --qims-text-lg: 1.125rem;   /* 18px — record headers */
  --qims-text-xl: 1.375rem;   /* 22px — module titles */
  --qims-text-2xl: 1.75rem;   /* 28px — page titles */
  --qims-text-3xl: 2.25rem;   /* 36px — a metric a manager reads across the room */

  --qims-leading-tight: 1.25;
  --qims-leading-normal: 1.5;
  --qims-weight-normal: 400;
  --qims-weight-medium: 500;
  --qims-weight-bold: 700;

  /* Spacing. One 4px step, scaled by density. Everything that sets a gap or a
     padding multiplies these rather than picking a number. */
  --qims-density: 1;
  --qims-space-1: calc(0.25rem * var(--qims-density));
  --qims-space-2: calc(0.5rem * var(--qims-density));
  --qims-space-3: calc(0.75rem * var(--qims-density));
  --qims-space-4: calc(1rem * var(--qims-density));
  --qims-space-5: calc(1.25rem * var(--qims-density));
  --qims-space-6: calc(1.5rem * var(--qims-density));
  --qims-space-8: calc(2rem * var(--qims-density));
  --qims-space-12: calc(3rem * var(--qims-density));

  /* Controls. 2.75rem is 44px, the touch target a tablet wants; the AA floor
     from 2.5.8 is 24px and every density stays above it. Which density a
     tenant gets is D-55's answer, not a guess made here. */
  --qims-control-height: 2.25rem;
  --qims-control-height-sm: 1.875rem;
  --qims-tap-min: 1.5rem;

  --qims-radius-sm: 3px;
  --qims-radius-md: 6px;
  --qims-radius-lg: 10px;
  --qims-radius-pill: 999px;

  --qims-shadow-1: 0 1px 2px rgb(49 52 55 / 0.08);
  --qims-shadow-2: 0 2px 8px rgb(49 52 55 / 0.10);
  --qims-shadow-3: 0 8px 24px rgb(49 52 55 / 0.14);

  /* Focus is 3:1 against the surface and never removed, only restyled. */
  --qims-focus-ring: var(--qims-blue-600);
  --qims-focus-width: 2px;
  --qims-focus-offset: 2px;
}

/* Compact is a tenant or per-view setting, not a breakpoint: a hangar tablet
   may want comfortable and a desk monitor compact, which is the opposite of
   what a width query would give. */
[data-qims-density="compact"] {
  --qims-density: 0.75;
  --qims-control-height: 1.875rem;
  --qims-control-height-sm: 1.625rem;
}

[data-qims-density="touch"] {
  --qims-density: 1.15;
  --qims-control-height: 2.75rem;
  --qims-control-height-sm: 2.25rem;
}