/*
  NSWTF brand design tokens. v1.3

  v1.3 changes:
  - Grey scale is now a clean 000-900 sequence. Old 050/100/200/300 shifted
    up to 100/200/300/400 (same hex values, renumbered), and 500 was added
    as an oklch lightness midpoint between 400 and 600, closing the gap
    that used to jump straight from 300 to 600. 600-900 are unchanged.
    Every internal alias that pointed at a shifted number (sys-surface,
    sys-border, sys-divider, sys-row-hover) was repointed to keep the same
    rendered colour.

  v1.2.1 changes:
  - Restored three tokens dropped during the v1.2 rewrite that consumers
    still reference: --nswtf-color-neutral-050, --nswtf-elevation-sm, and
    the --nswtf-color-component-contrast-* group. Unrelated to the v1.2
    colour rework below; this was an omission, not a deliberate removal.

  v1.2 changes:
  - All derived colours are precomputed literal hexes. The generating
    color-mix() expression is kept as a comment beside each value. Reasons:
    contrast can be audited against real values, tokens are portable to
    consumers without color-mix support (email, Figma variables, whatever
    iMIS inlines), and mixing-space inconsistency (oklab darks vs srgb
    tints in v1.1) is resolved: all mixes are now oklab.
  - Every intent fg/bg pairing now clears WCAG 4.5:1. Backgrounds are a
    uniform 10% mix; warning fg darkened #8a6a00 -> #806200; neutral fg
    darkened #64748b -> #4d5c73. Measured ratios noted per pair.
  - intent-danger is no longer brand-red as text. Brand-red passes on
    white (4.61:1) but fails on its own tinted bg (3.41:1). Text uses
    #b3271b; brand-red remains available as intent-danger-fill for solid
    surfaces with light text.
  - intent-info now aliases sys-primary (same hex as before). Note: an
    info badge in the interactive colour can read as clickable; if that
    bites, split it later.
  - New: current-item accent (3:1 non-text ochre), radius, motion,
    focus-ring and z-index token groups.
*/

:root {

  /* ======================================================================== */
  /* 1. COLOR PALETTE                                                         */
  /* ======================================================================== */

  /* Brand Primitives */
  --nswtf-color-brand-blue: #00689E;
  --nswtf-color-brand-yellow: #F1B434;
  --nswtf-color-brand-red: #DD3224;
  --nswtf-color-brand-purple: #992F87;
  --nswtf-color-brand-orange: #DF5643;
  --nswtf-color-brand-green: #009B77;

  /* Neutral Scale */
  /* 000 - pure white surface */
  /* 100 - near-white surface, one step off 000 (Content Buddy bridge) */
  /* 200 - off-white page bg */
  /* 300 - dividers, hairlines, panel fill */
  /* 400 - borders, input outlines */
  /* 500 - fills the old 400->600 gap; no role owns it yet */
  /* 600 - mid grey; not used as text, see the 700 note below */
  /* 700 - muted secondary text. NOTE: this is the ONLY grey that passes
           AA as text (6.67:1 on white, 5.96:1 on neutral-200). There is
           deliberately no lighter text grey; do not "go one lighter". */
  /* 800 - body text, dark surface */
  /* 900 - near-black surface, footer */

  --nswtf-color-neutral-000: #ffffff;
  --nswtf-color-neutral-100: #f8f8f9;
  --nswtf-color-neutral-200: #f2f2f2;
  --nswtf-color-neutral-300: #e4e4e6;
  --nswtf-color-neutral-400: #cccccd;
  --nswtf-color-neutral-500: #929294;  /* oklch: lightness midpoint of 400 and 600 */
  --nswtf-color-neutral-600: #5c5c5e;
  --nswtf-color-neutral-700: #424244;
  --nswtf-color-neutral-800: #2c2c2e;
  --nswtf-color-neutral-900: #1a1a1b;

  /* Sub-Group / Segment Aliases (Decoupled structural assignments) */
  --nswtf-color-subgroup-future-teachers: var(--nswtf-color-brand-red);
  --nswtf-color-subgroup-library: var(--nswtf-color-brand-red);
  --nswtf-color-subgroup-part-time: var(--nswtf-color-brand-purple);
  --nswtf-color-subgroup-women: var(--nswtf-color-brand-purple);
  --nswtf-color-subgroup-tafe: var(--nswtf-color-brand-orange);
  --nswtf-color-subgroup-multicultural: var(--nswtf-color-brand-orange);
  --nswtf-color-subgroup-beginning-teachers: var(--nswtf-color-brand-green);
  --nswtf-color-subgroup-direct-payments: var(--nswtf-color-brand-green);

  /* System Main Brand Roles & States */
  /* All derived values: color-mix(in oklab, ...), precomputed. */
  --nswtf-color-sys-primary: var(--nswtf-color-brand-blue);
  --nswtf-color-sys-primary-dark: #00527e;      /* oklab: blue 85% + black */
  --nswtf-color-sys-primary-tint-100: #d1e0ec;  /* oklab: blue 20% + white */
  --nswtf-color-sys-primary-tint-200: #a3c2d9;  /* oklab: blue 40% + white */

  --nswtf-color-sys-complement: var(--nswtf-color-brand-yellow);
  --nswtf-color-sys-complement-dark: #c29028;      /* oklab: yellow 85% + black.
       NOT text-safe: 2.87:1 on white. Fills, borders and large graphics
       only; body text on it must be neutral-900 (6.06:1). */
  --nswtf-color-sys-complement-tint-100: #fdf1dc;  /* oklab: yellow 20% + white */
  --nswtf-color-sys-complement-tint-200: #fae2b8;  /* oklab: yellow 40% + white */

  /* Current-item accent. The darkest yellow-family ochre that still reads
     as yellow while clearing the 3:1 non-text minimum on white (3.54:1).
     Any yellow dark enough for 4.5:1 text is warning-brown, so .is-current
     uses this as a border/underline with sys-text for the label. */
  --nswtf-color-sys-current-accent: #ad8118;

  /* System Functional Neutral Roles */
  --nswtf-color-sys-text: var(--nswtf-color-neutral-900);
  --nswtf-color-sys-text-muted: var(--nswtf-color-neutral-700);
  --nswtf-color-sys-text-light: var(--nswtf-color-neutral-000);
  --nswtf-color-sys-surface: var(--nswtf-color-neutral-200);
  --nswtf-color-sys-surface-raised: var(--nswtf-color-neutral-000);
  --nswtf-color-sys-border: var(--nswtf-color-neutral-400);
  --nswtf-color-sys-divider: var(--nswtf-color-neutral-300);

  /* System UI Semantic Interaction Mapping */
  /* Hover is neutral, active is tinted blue. A 20% blue hover is loud on
     dense iMIS tables; neutral hover + blue selection is calmer and keeps
     the tint meaningful. */
  --nswtf-color-sys-row-hover: var(--nswtf-color-neutral-200);
  --nswtf-color-sys-row-active: var(--nswtf-color-sys-primary-tint-100);
  --nswtf-color-sys-callout-bg: var(--nswtf-color-sys-complement-tint-100);

  /* Interactive Controls & Anchors */
  /* Default is the darker blue, hover the brighter one: v1.1 behaviour,
     kept deliberately. It inverts the usual hover-darkens convention but
     both states pass AA (dark 8.37:1, base 6.05:1 on white). */
  --nswtf-color-action-link: var(--nswtf-color-sys-primary-dark);
  --nswtf-color-action-link-hover: var(--nswtf-color-sys-primary);
  --nswtf-color-action-link-visited: var(--nswtf-color-brand-purple);
  --nswtf-color-action-link-focus: var(--nswtf-color-sys-primary);
  --nswtf-color-action-link-disabled: var(--nswtf-color-sys-border);

  /* Intent Status Systems */
  /* Backgrounds: srgb fg 10% + white, precomputed. Every fg passes 4.5:1
     on white AND on its own bg (ratio on own bg noted). */

  --nswtf-color-intent-success: #00795d;
  --nswtf-color-intent-success-bg: #e6f2ef;   /* 4.70:1 */

  --nswtf-color-intent-warning: #806200;       /* was #8a6a00 */
  --nswtf-color-intent-warning-bg: #f2efe6;   /* 4.98:1 */

  --nswtf-color-intent-danger: #b3271b;        /* text/icon use */
  --nswtf-color-intent-danger-bg: #f7e9e8;    /* 5.52:1 */
  --nswtf-color-intent-danger-fill: var(--nswtf-color-brand-red);
       /* solid surfaces with text-light on top (4.61:1) */

  --nswtf-color-intent-info: var(--nswtf-color-sys-primary);
  --nswtf-color-intent-info-bg: #e6f0f5;      /* 5.22:1 */

  --nswtf-color-intent-neutral: #4d5c73;       /* was #64748b (4.76:1, marginal) */
  --nswtf-color-intent-neutral-bg: #edeff1;   /* 5.89:1 */

  /* Composite Component Surface Pairings */
  --nswtf-color-component-disabled-bg: var(--nswtf-color-sys-divider);
  --nswtf-color-component-disabled-fg: var(--nswtf-color-sys-border);

  --nswtf-color-component-primary-bg: var(--nswtf-color-sys-primary);
  --nswtf-color-component-primary-fg: var(--nswtf-color-sys-text-light);
  --nswtf-color-component-primary-bg-hover: var(--nswtf-color-sys-primary-dark);

  --nswtf-color-component-secondary-bg: var(--nswtf-color-sys-complement);
  --nswtf-color-component-secondary-fg: var(--nswtf-color-sys-text);
  --nswtf-color-component-secondary-bg-hover: var(--nswtf-color-sys-complement-dark);
       /* fg stays sys-text on hover: 6.06:1 on complement-dark */

  --nswtf-color-component-contrast-bg: var(--nswtf-color-neutral-900);
  --nswtf-color-component-contrast-fg: var(--nswtf-color-sys-text-light);
  --nswtf-color-component-contrast-bg-hover: var(--nswtf-color-neutral-800);


  /* ======================================================================== */
  /* 2. TYPOGRAPHY                                                            */
  /* ======================================================================== */

  /* --------------------------*/
  /* Typeface Collections */
  /* --------------------------*/

  --nswtf-font-family-body: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --nswtf-font-family-heading: var(--nswtf-font-family-body);
  --nswtf-font-family-mono: 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;


  /* --------------------------*/
  /* Weights      */
  /* --------------------------*/

  --nswtf-font-weight-light: 300;
  --nswtf-font-weight-regular: 400;
  --nswtf-font-weight-semibold: 600;
  --nswtf-font-weight-bold: 700;


  /* --------------------------*/
  /*    Sizes     */
  /* --------------------------*/

  /* Steps match the NSWTF WordPress site's type scale.
  Values mirror those em multipliers as rem. */

  /* Font Scale Size Steps */
  /* sm     14px */
  /* base   16px */
  /* lg     18px */
  /* xl     21px */
  /* 2xl    24px */
  /* 3xl    26px */
  /* 4xl    28px */
  /* 5xl    40px */

  --nswtf-font-size-sm: 0.875rem;
  --nswtf-font-size-base: 1rem;
  --nswtf-font-size-lg: 1.125rem;
  --nswtf-font-size-xl: 1.33rem;
  --nswtf-font-size-2xl: 1.5rem;
  --nswtf-font-size-3xl: 1.6rem;
  --nswtf-font-size-4xl: 1.75rem;
  --nswtf-font-size-5xl: 2.5rem;


  /* --------------------------*/
  /* Line height */
  /* --------------------------*/

  --nswtf-line-height-heading: 1.3;
  --nswtf-line-height-data: 1.4;
  --nswtf-line-height-body: 1.5;

  /* --------------------------*/
  /* Tracking     */
  /* --------------------------*/

  --nswtf-letter-spacing-heading: -0.02em;
  --nswtf-letter-spacing-normal: 0;

  /* ======================================================================== */
  /* 3. SHAPE, MOTION & FOCUS                                                 */
  /* ======================================================================== */

  /* Radius. md is the control default (buttons, inputs), lg for cards
     and panels, pill for chips and badges. */
  --nswtf-radius-sm: 3px;
  --nswtf-radius-md: 6px;
  --nswtf-radius-lg: 8px;
  --nswtf-radius-pill: 999px;

  /* Elevation. Card-level shadows only; do not add steps without a
     component that needs them. */
  --nswtf-elevation-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);

  /* Motion. Gate all transitions behind
     @media (prefers-reduced-motion: no-preference). */
  --nswtf-motion-duration-fast: 120ms;
  --nswtf-motion-duration-slow: 240ms;
  --nswtf-motion-ease: ease;

  /* Focus ring. Two-tone so the ring survives any background: a white
     inner keyline via box-shadow, blue outer via outline. On white the
     inner ring merges with the page and it looks like the v1.1 single
     ring; on a filled button or blue band it stays visible. */
  --nswtf-focus-ring-color: var(--nswtf-color-action-link-focus);
  --nswtf-focus-ring-width: 2px;
  --nswtf-focus-ring-offset: 2px;
  --nswtf-focus-ring-inner: 0 0 0 var(--nswtf-focus-ring-offset) var(--nswtf-color-neutral-000);

  /* Z-index scale. Three tiers is enough; adding a fourth number is how
     the 9999 arms race starts. */
  --nswtf-z-sticky: 100;
  --nswtf-z-overlay: 500;
  --nswtf-z-modal: 900;

  /* ======================================================================== */
  /* 4. DIMENSION & RESPONSIVE METRICS                                        */
  /* ======================================================================== */

  /* --------------------------*/
  /* Layout Spacing Steps */
  /* --------------------------*/

  /* 4px base with an 8px working rhythm. No attempt to be clever.
     px (not rem) is deliberate: hairline geometry must stay stable inside
     iMIS's fixed-width Telerik markup. Type still scales via rem sizes;
     spacing does not follow user font-size preferences, only zoom. */

  --nswtf-spacing-3xs: 2px;
  --nswtf-spacing-2xs: 4px;
  --nswtf-spacing-xs: 8px;
  --nswtf-spacing-sm: 12px;
  --nswtf-spacing-md: 16px;
  --nswtf-spacing-lg: 24px;
  --nswtf-spacing-xl: 32px;
  --nswtf-spacing-2xl: 48px;
  --nswtf-spacing-3xl: 64px;

  /* --------------------------*/
  /* Breakpoints     */
  /* --------------------------*/

  /* Bootstrap 3 grid tiers, min-width, mobile-first.

     REFERENCE ONLY. Custom properties cannot be used inside @media
     conditions and there is no build step, so these values must be
     repeated literally in media queries. Keep this table and those
     literals in sync by hand. */

  /* 480px;  phones        (Bootstrap @screen-xs-min) */
  /* 768px;  tablets       (Bootstrap @screen-sm-min) */
  /* 992px;  desktops      (Bootstrap @screen-md-min) */
  /* 1200px; wide desktops (Bootstrap @screen-lg-min) */

  --nswtf-breakpoint-xs: 480px;
  --nswtf-breakpoint-sm: 768px;
  --nswtf-breakpoint-md: 992px;
  --nswtf-breakpoint-lg: 1200px;

}