/* ==========================================================================
   NXTGN Capacity Control website - design tokens
   Source: docs/DESIGN.md section 2 (NXTGN Design + IoT design system), same --nx-* roles as the cockpit
   (src/NXTGN.AuditArchive.WebResources/css/tokens.css), extended by a marketing type scale and an 8 px rhythm.

   Rules
   - Navy carries the structure, green signals (primary action accents, positive figures, "OK"/"active").
     Green is never decorative.
   - Light is the default; dark follows prefers-color-scheme.
   - Every colour of the site lives in this file. site.css references tokens only (tests/page.test.mjs checks it).
   - Small text uses the *-text companions (>= 4.5:1). --nx-accent (#80CD29) is a fill/signal colour, never text
     on light backgrounds.
   ========================================================================== */

:root {
  color-scheme: light;

  /* palette (NXTGN Design) */
  --nx-green-500: #80CD29;
  --nx-green-700: #559017;
  --nx-green-800: #3D6B10;
  --nx-green-300: #9FE04A;
  --nx-navy-600: #1E3352;
  --nx-navy-700: #15253B;
  --nx-navy-800: #101D2F;
  --nx-navy-900: #0C1422;
  --nx-gray-50: #F4F6F8;
  --nx-gray-100: #E9EDF1;
  --nx-gray-200: #D7DDE5;
  --nx-gray-300: #B9C3CF;
  --nx-gray-500: #6B7787;
  --nx-gray-600: #5A6676;
  --nx-white: #FFFFFF;

  /* roles: surfaces and text */
  --nx-bg: #FFFFFF;
  --nx-bg-tint: #F4F6F8;
  --nx-surface: #FFFFFF;
  --nx-surface-raised: #FAFBFC;
  --nx-surface-inset: #F1F4F7;
  --nx-text: #101D2F;
  --nx-text-secondary: #5A6676;      /* >= 5.3:1 on white and on --nx-bg-tint */
  --nx-border: #E1E6EC;
  --nx-border-strong: #B9C3CF;
  --nx-control-border: #7F8B9B;      /* form controls, >= 3:1 against white */
  --nx-header-bg: rgba(255, 255, 255, 0.86);
  --nx-header-bg-solid: #FFFFFF;
  --nx-overlay: rgba(12, 20, 34, 0.40);

  /* roles: actions and signals */
  --nx-primary: #15253B;
  --nx-primary-hover: #1E3352;
  --nx-primary-text: #FFFFFF;
  --nx-primary-accent: #80CD29;      /* the green arrow inside the navy primary button */
  --nx-accent: #80CD29;              /* signal fill: dots, checks, bars */
  --nx-accent-strong: #559017;       /* lines and icons on light backgrounds (>= 3:1), large figures */
  --nx-accent-text: #3D6B10;         /* small green text (>= 6:1) */
  --nx-accent-soft: #EEF6E3;
  --nx-positive: #559017;            /* big positive figures (large text, >= 3:1) */
  --nx-neutral-figure: #5A6676;      /* figures that are not a saving */
  --nx-focus: #559017;               /* focus ring on light surfaces (>= 3:1) */
  --nx-focus-on-dark: #9FE04A;       /* focus ring on navy surfaces */
  --nx-link: #2563A8;
  --nx-link-hover: #1B4C82;

  /* badges: draft (not decided yet) and planned */
  --nx-draft-bg: #FDF1DA;
  --nx-draft-text: #7A4E00;
  --nx-draft-border: #F0D49C;
  --nx-planned-bg: #E5F0FA;
  --nx-planned-text: #1F5A99;
  --nx-planned-border: #BCD6F0;
  --nx-error-text: #A8322E;
  --nx-error-soft: #FBE6E6;
  --nx-error-border: #C2403B;
  --nx-warn-fill: #F2A516;
  --nx-featured-border: #15253B;     /* highlighted pricing tier */
  --nx-featured-bg: #15253B;
  --nx-featured-text: #FFFFFF;

  /* navy blocks (results summary, final call to action, footer) - identical in both themes */
  --nx-navy-block: #15253B;
  --nx-navy-block-deep: #101D2F;
  --nx-navy-block-border: #15253B;
  --nx-on-navy-draft-bg: rgba(242, 169, 59, 0.16);
  --nx-on-navy-draft-text: #F2B95B;  /* >= 6:1 on navy */
  --nx-on-navy-draft-border: rgba(242, 169, 59, 0.36);
  --nx-on-navy: #FFFFFF;
  --nx-on-navy-muted: #B4C0D0;       /* >= 8:1 on navy */
  --nx-on-navy-subtle: #8D9BB0;      /* >= 5:1 on navy */
  --nx-on-navy-border: rgba(255, 255, 255, 0.12);
  --nx-on-navy-hover: rgba(255, 255, 255, 0.08);
  --nx-on-navy-positive: #9FE04A;
  --nx-on-navy-grid: rgba(255, 255, 255, 0.06);
  --nx-on-navy-button: #80CD29;
  --nx-on-navy-button-hover: #9FE04A;
  --nx-on-navy-button-text: #101D2F;

  /* illustrations and patterns */
  --nx-grid-line: rgba(21, 37, 59, 0.055);
  --nx-dot: rgba(21, 37, 59, 0.16);
  --nx-icon-tile: #EEF2F6;
  --nx-icon-tile-border: #DCE3EB;
  --nx-icon: #15253B;
  --nx-art-gauge-track: #E9EDF1;
  --nx-art-gauge-before: #C3CDD9;
  --nx-art-gauge-after: #15253B;
  --nx-art-cell: #15253B;
  --nx-art-cell-soft: #C3CDD9;
  --nx-art-flow: #B9C3CF;
  --nx-art-flow-active: #15253B;
  --nx-shadow-color: #15253B;
  --nx-art-shadow-opacity: 0.10;
  --nx-mask-solid: #000000;          /* mask luminance, not a visible colour */

  /* chart */
  --nx-chart-without: #5A6676;
  --nx-chart-with: #559017;
  --nx-chart-band-saving: rgba(128, 205, 41, 0.20);
  --nx-chart-band-extra: rgba(90, 102, 118, 0.16);
  --nx-chart-grid: #E9EDF1;
  --nx-chart-axis: #B9C3CF;
  --nx-chart-guide: #7F8B9B;

  /* range slider */
  --nx-range-track: #D7DDE5;
  --nx-range-fill: #15253B;
  --nx-range-thumb: #FFFFFF;
  --nx-range-thumb-border: #15253B;

  /* shadows */
  --nx-shadow-xs: 0 1px 2px rgba(16, 29, 47, 0.06);
  --nx-shadow-sm: 0 1px 3px rgba(16, 29, 47, 0.08), 0 1px 2px rgba(16, 29, 47, 0.04);
  --nx-shadow-md: 0 8px 24px rgba(16, 29, 47, 0.08), 0 2px 6px rgba(16, 29, 47, 0.04);
  --nx-shadow-lg: 0 24px 64px rgba(16, 29, 47, 0.12), 0 4px 12px rgba(16, 29, 47, 0.05);

  /* typography: Saira for display and key figures, IBM Plex Sans for reading, IBM Plex Mono for eyebrows and values */
  --nx-font-display: "Saira", "Segoe UI", system-ui, sans-serif;
  --nx-font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --nx-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --nx-fs-xs: 0.75rem;     /* 12 */
  --nx-fs-sm: 0.875rem;    /* 14 */
  --nx-fs-md: 1rem;        /* 16 */
  --nx-fs-lg: 1.125rem;    /* 18 */
  --nx-fs-xl: 1.25rem;     /* 20 */
  --nx-fs-2xl: 1.5rem;     /* 24 */
  --nx-fs-h2: clamp(1.75rem, 1.25rem + 1.9vw, 2.625rem);    /* 28 -> 42 */
  --nx-fs-display: clamp(2.375rem, 1.55rem + 3.4vw, 4rem); /* 38 -> 64 */
  --nx-fs-figure: clamp(2.75rem, 2rem + 3vw, 4.25rem);     /* 44 -> 68 */
  --nx-lh-body: 1.6;
  --nx-lh-snug: 1.35;
  --nx-lh-tight: 1.08;

  /* 8 px rhythm (4 px only for hairline gaps) */
  --nx-sp-4: 4px;
  --nx-sp-8: 8px;
  --nx-sp-12: 12px;
  --nx-sp-16: 16px;
  --nx-sp-24: 24px;
  --nx-sp-32: 32px;
  --nx-sp-40: 40px;
  --nx-sp-48: 48px;
  --nx-sp-64: 64px;
  --nx-sp-80: 80px;
  --nx-sp-96: 96px;
  --nx-sp-128: 128px;
  --nx-section-y: clamp(64px, 4rem + 4vw, 128px);

  /* shape, layout, motion */
  --nx-radius-sm: 6px;
  --nx-radius: 8px;
  --nx-radius-lg: 12px;
  --nx-radius-xl: 16px;
  --nx-radius-2xl: 24px;
  --nx-radius-pill: 999px;
  --nx-container: 1200px;
  --nx-container-wide: 1320px;
  --nx-gutter: clamp(16px, 3.2vw, 32px);
  --nx-header-h: 72px;
  --nx-duration-fast: 120ms;
  --nx-duration: 200ms;
  --nx-duration-slow: 320ms;
  --nx-ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --nx-bg: #0C1422;
    --nx-bg-tint: #0F1A2B;
    --nx-surface: #13213A;
    --nx-surface-raised: #172742;
    --nx-surface-inset: #0F1C30;
    --nx-text: #E6EBF2;
    --nx-text-secondary: #A3B1C4;
    --nx-border: #22324B;
    --nx-border-strong: #34476A;
    --nx-control-border: #6A7FA3;
    --nx-header-bg: rgba(12, 20, 34, 0.84);
    --nx-header-bg-solid: #0C1422;
    --nx-overlay: rgba(4, 8, 15, 0.64);

    --nx-primary: #80CD29;
    --nx-primary-hover: #9FE04A;
    --nx-primary-text: #101D2F;
    --nx-primary-accent: #101D2F;
    --nx-accent: #80CD29;
    --nx-accent-strong: #9FE04A;
    --nx-accent-text: #9FE04A;
    --nx-accent-soft: rgba(128, 205, 41, 0.12);
    --nx-positive: #9FE04A;
    --nx-neutral-figure: #A3B1C4;
    --nx-focus: #9FE04A;
    --nx-link: #8FB6EC;
    --nx-link-hover: #B5CEF3;

    --nx-draft-bg: rgba(242, 169, 59, 0.14);
    --nx-draft-text: #F2B95B;
    --nx-draft-border: rgba(242, 169, 59, 0.34);
    --nx-planned-bg: rgba(143, 182, 236, 0.12);
    --nx-planned-text: #A9C8F2;
    --nx-planned-border: rgba(143, 182, 236, 0.32);
    --nx-error-text: #F08A90;
    --nx-error-soft: rgba(240, 138, 144, 0.12);
    --nx-error-border: #F08A90;
    --nx-warn-fill: #F2A93B;
    --nx-featured-border: #80CD29;
    --nx-featured-bg: #80CD29;
    --nx-featured-text: #101D2F;

    --nx-navy-block: #15253B;
    --nx-navy-block-deep: #0A111D;
    --nx-navy-block-border: #2A3D5E;

    --nx-grid-line: rgba(255, 255, 255, 0.045);
    --nx-dot: rgba(255, 255, 255, 0.12);
    --nx-icon-tile: #1A2C48;
    --nx-icon-tile-border: #2A3D5E;
    --nx-icon: #DCE3EC;
    --nx-art-gauge-track: #0F1C30;
    --nx-art-gauge-before: #34476A;
    --nx-art-gauge-after: #DCE3EC;
    --nx-art-cell: #DCE3EC;
    --nx-art-cell-soft: #34476A;
    --nx-art-flow: #34476A;
    --nx-art-flow-active: #DCE3EC;
    --nx-shadow-color: #000000;
    --nx-art-shadow-opacity: 0.45;

    --nx-chart-without: #A3B1C4;
    --nx-chart-with: #9FE04A;
    --nx-chart-band-saving: rgba(128, 205, 41, 0.18);
    --nx-chart-band-extra: rgba(163, 177, 196, 0.16);
    --nx-chart-grid: #22324B;
    --nx-chart-axis: #34476A;
    --nx-chart-guide: #6A7FA3;

    --nx-range-track: #34476A;
    --nx-range-fill: #9FE04A;
    --nx-range-thumb: #13213A;
    --nx-range-thumb-border: #9FE04A;

    --nx-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
    --nx-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --nx-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.40);
    --nx-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.50);
  }
}