/*
  NSWTF brand design tokens. v1.1

  The scheme is --nswtf-{category}-{role}[-{variant}]: 
*/

:root {

  /* ================== */
  /* ===== Colour ===== */
  /* ================== */

  /* 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 - off-white page bg */
  /* 200 - dividers, hairlines, panel fill */
  /* 300 - borders, input outlines */
  /* 600 - muted secondary text (AA) */
  /* 800 - body text, dark surface */
  /* 900 - near-black surface, footer */

  --nswtf-color-neutral-000: #ffffff;
  --nswtf-color-neutral-100: #f2f2f2;
  --nswtf-color-neutral-200: #e4e4e6;
  --nswtf-color-neutral-300: #cccccd;
  --nswtf-color-neutral-600: #5c5c5e;
  --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 */
  --nswtf-color-sys-primary: var(--nswtf-color-brand-blue);
  --nswtf-color-sys-primary-dark: color-mix(in oklab, var(--nswtf-color-sys-primary) 85%, black);
  --nswtf-color-sys-primary-tint-100: color-mix(in srgb, var(--nswtf-color-sys-primary) 20%, white);
  --nswtf-color-sys-primary-tint-200: color-mix(in srgb, var(--nswtf-color-sys-primary) 40%, white);

  --nswtf-color-sys-complement: var(--nswtf-color-brand-yellow);
  --nswtf-color-sys-complement-dark: color-mix(in oklab, var(--nswtf-color-sys-complement) 85%, black);
  --nswtf-color-sys-complement-tint-100: color-mix(in srgb, var(--nswtf-color-sys-complement) 20%, white);
  --nswtf-color-sys-complement-tint-200: color-mix(in srgb, var(--nswtf-color-sys-complement) 40%, white);

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

  /* System UI Semantic Interaction Mapping */
  --nswtf-color-sys-row-hover: var(--nswtf-color-sys-primary-tint-100);
  --nswtf-color-sys-row-active: var(--nswtf-color-sys-primary-tint-200);
  --nswtf-color-sys-callout-bg: var(--nswtf-color-sys-complement-tint-200);

  /* Interactive Controls & Anchors */
  --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 */
  --nswtf-color-intent-success: #00795d;
  --nswtf-color-intent-success-bg: color-mix(in srgb, var(--nswtf-color-intent-success) 20%, white);

  --nswtf-color-intent-warning: #8a6a00;
  --nswtf-color-intent-warning-bg: color-mix(in srgb, var(--nswtf-color-intent-warning) 20%, white);

  --nswtf-color-intent-danger: var(--nswtf-color-brand-red);
  --nswtf-color-intent-danger-bg: color-mix(in srgb, var(--nswtf-color-intent-danger) 20%, white);

  --nswtf-color-intent-info: #00689e;
  --nswtf-color-intent-info-bg: color-mix(in srgb, var(--nswtf-color-intent-info) 20%, white);

  --nswtf-color-intent-neutral: #64748b;
  --nswtf-color-intent-neutral-bg: color-mix(in srgb, var(--nswtf-color-intent-neutral) 20%, white);

  /* 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);

  --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 */

  /* Font Scale Size Steps */
  --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 */
  /* ------------ */

  /* Vertical Mechanics */
  /* headings (matches the WordPress site's 1.3) */
  --nswtf-line-height-heading: 1.3;
  --nswtf-line-height-data: 1.4;
  --nswtf-line-height-body: 1.5;

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

  /* Character Mechanics  */
  --nswtf-letter-spacing-heading: -0.02em;
  --nswtf-letter-spacing-normal: 0;

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

  /* ------------ */
  /* Layout Spacing Steps */
  /* ------------ */
  /* 4px base with an 8px working rhythm. No attempt to be clever.*/

  --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.
     Media Target Boundaries (Normalised taxonomy prefix)
     Min-width tiers (mobile-first). Each max-width companion is the next tier */

  /* < 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;

}