/* Teal & Amber — design tokens (named for its colours on 28 Oct 2026; first drafted as "Navy & Sky").
   Source of truth: figcraft/teal-amber.figcraft (collection "Teal & Amber"), exported by FigCraft as
   figcraft/html/figcraft-variables.css. This file keeps the same values under stable, semantic
   names (--ns-*) so Original (Grails), Classic (Go) and the templates share one vocabulary.
   Light values follow the 2023 Figma style sheet. Dark values are new: Figma drew no dark mode.
   Every text pair below was checked at 4.5:1 or better (design guide, "Contrast"). */

:root {
  /* brand (owner, 28 Oct 2026: "the bluish green one with yellow and orange hues") */
  --ns-navy: #003559;          /* headings, KPI numbers and the brand text. Never a button fill */
  --ns-teal: #18757C;          /* action: links, the active menu row and tab. 5.4:1 on white */
  --ns-fill-teal: #18757C;     /* solid teal fill behind white text (buttons, badges, the purple swaps): 5.4:1 with #FFFFFF */
  --ns-teal-bright: #349FA6;   /* the teal of the 2023 Figma charts: bars, lines, logo glow. Not for text */
  --ns-teal-soft: rgba(52, 159, 166, .10);
  --ns-teal-line: rgba(52, 159, 166, .28);
  --ns-cyan: #5CDDE5;          /* logo mark and chart accent only, never text */
  --ns-sky: #0467DF;           /* touches only, about 5% of a page: links, references, info, help icons, one chart series. 5.1:1 */
  --ns-sky-soft: rgba(4, 103, 223, .08); --ns-sky-line: rgba(4, 103, 223, .22);
  --ns-sky-text: #0460CF;      /* sky text on the sky tint: 5.0:1 on #E6EEF8, where --ns-sky reads 4.48 (council A1) */
  --ns-amber: #FFAD0E;         /* yellow highlight: KPI bars, carousel, warnings */
  --ns-orange: #E8A66C;        /* warm chart series and the end of every KPI bar */
  --ns-coral: #D87659;         /* falling prices and the second warm series */
  --ns-amber-text: #8A5600;    /* amber as text: 6.2:1 on white */
  --ns-steel: #7EA0B7;

  /* Teal and amber in equal measure (owner, 28 Oct 2026). Teal confirms and moves you around: the primary
     button, the active tab, the current page, links, focus. Amber makes and marks: Create, Add and Export,
     the active-menu marker, counts, selected chips and rows, finished steps, pending marks. Two solid button
     colours, never more: teal for "confirm", amber for "make". Everything else is white chrome. */
  --ns-chrome-900: #14686F; --ns-chrome-800: #18757C; --ns-chrome-700: #23868D; --ns-chrome-600: #18757C;
  --ns-chrome-300: #A9DCDF; --ns-chrome-200: #CDEBED; --ns-chrome-100: #E4F4F5; --ns-chrome-50: #F2FAFA;
  --ns-chrome-text: #0F5A60;                    /* text on any chrome tint: 7.0:1 on chrome-100 */
  --ns-tint-teal: #E4F4F5; --ns-tint-teal-line: #A9DCDF; --ns-tint-teal-text: #0F5A60;
  --ns-btn-primary: linear-gradient(180deg, #23868D 0%, #18757C 55%, #14686F 100%);
  --ns-btn-primary-hover: linear-gradient(180deg, #2A9199 0%, #1D7F86 55%, #17717A 100%);
  --ns-btn-chrome: linear-gradient(180deg, #FFFFFF 0%, #F2FAFA 100%);
  --ns-btn-chrome-hover: linear-gradient(180deg, #F2FAFA 0%, #E4F4F5 100%);
  --ns-btn-tint: linear-gradient(180deg, #EEF8F8 0%, #E4F4F5 100%);
  --ns-btn-tint-hover: linear-gradient(180deg, #E4F4F5 0%, #CDEBED 100%);
  --ns-bar-fill: linear-gradient(90deg, #349FA6 0%, #349FA6 35%, #FFAD0E 75%, #E8A66C 100%);   /* KPI bars: teal into amber */
  --ns-btn-amber: linear-gradient(180deg, #FFC23D 0%, #FFAD0E 55%, #F29B00 100%);
  --ns-btn-amber-hover: linear-gradient(180deg, #FFCB57 0%, #FFB82E 55%, #F7A40F 100%);
  --ns-on-amber: #3B2600;                       /* text on the amber button: 7.7:1 */
  --ns-amber-edge: #E08F00;
  --ns-amber-soft: rgba(255, 173, 14, .14);
  --ns-tint-amber: #FFF4DC; --ns-tint-amber-line: #FFD98A; --ns-tint-amber-text: #7A4C00;   /* 6.7:1 */
  --ns-highlight: inset 0 1px 0 rgba(255, 255, 255, .22);
  --ns-highlight-light: inset 0 1px 0 rgba(255, 255, 255, .9);
  --ns-lift: 0 1px 2px rgba(20, 104, 111, .18);
  --ns-motion-up: rgba(52, 159, 166, .18); --ns-motion-down: rgba(216, 118, 89, .16);
  --ns-ease-spring: cubic-bezier(.2, .9, .25, 1.15); --ns-ease-out: cubic-bezier(.16, 1, .3, 1);

  /* chart palette, in series order: teal, amber, orange, sky, coral, steel */
  --ns-chart-1: #2A8F96; --ns-chart-2: #FFAD0E; --ns-chart-3: #E8A66C;
  --ns-chart-4: #3D8FE8; --ns-chart-5: #D87659; --ns-chart-6: #7EA0B7;

  /* status */
  --ns-success: #11823B; --ns-success-text: #0E6E32; --ns-success-soft: rgba(17, 130, 59, .12);
  --ns-danger: #D92D20;  --ns-danger-text: #B42318;  --ns-danger-soft: rgba(217, 45, 32, .10);
  --ns-warn: #FFAD0E;    --ns-warn-text: #8A5600;    --ns-warn-soft: rgba(255, 173, 14, .16);
  --ns-info: #0467DF;

  /* surfaces and text */
  --ns-bg: #FAFAFA;
  --ns-surface: #FFFFFF;
  --ns-surface-2: #F7F7F7;
  --ns-border: #EDEDED;
  --ns-border-strong: #D9DEE5;
  --ns-text: #323232;
  --ns-text-2: #4F4F4F;
  /* Fix (A11Y1): muted text also needs 4.5:1 on the chrome-100 control tint. */
  --ns-muted: #646F7C;
  --ns-sidebar-text: #3C4757;
  --ns-primary-btn: var(--ns-navy);
  --ns-on-primary: #FFFFFF;
  --ns-overlay: rgba(0, 30, 36, .48);
  --ns-shadow: 0 6px 24px rgba(0, 53, 89, .06);
  --ns-shadow-lg: 0 18px 48px rgba(0, 53, 89, .16);
  --ns-focus: 0 0 0 3px rgba(52, 159, 166, .35);

  /* type */
  --ns-font: 'Poppins', 'Segoe UI', Helvetica, Arial, sans-serif;
  --ns-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --ns-fs-xs: 11.5px; --ns-fs-sm: 12.5px; --ns-fs-md: 13.5px; --ns-fs-base: 14px;
  --ns-fs-lg: 15px; --ns-fs-xl: 18px; --ns-fs-title: 22px; --ns-fs-kpi: 26px; --ns-fs-hero: 34px;

  /* shape and space */
  --ns-radius-sm: 6px; --ns-radius-md: 8px; --ns-radius-lg: 12px; --ns-radius-xl: 20px;
  --ns-space-1: 4px; --ns-space-2: 8px; --ns-space-3: 12px; --ns-space-4: 16px;
  --ns-space-5: 20px; --ns-space-6: 24px; --ns-space-8: 32px;

  /* layout */
  --ns-sidebar-w: 264px;
  --ns-sidebar-w-collapsed: 76px;
  --ns-header-h: 61px;
  --ns-content-pad: 28px;

  /* motion */
  --ns-ease: cubic-bezier(.2, .7, .2, 1);
  --ns-fast: 120ms; --ns-mid: 200ms;
}

[data-theme="dark"] {
  --ns-navy: #9ED9DE;          /* headings keep the "navy" role, lightened to a pale teal to read on dark */
  --ns-teal: #5CC9D0;          /* 8.2:1 on the dark surface */
  --ns-fill-teal: #17777E;     /* night solid teal fill behind white text: 5.3:1 with #FFFFFF (the night primary button colour) */
  --ns-teal-bright: #4CC2C9;
  --ns-sky: #6AAEFF; --ns-sky-soft: rgba(106, 174, 255, .12); --ns-sky-line: rgba(106, 174, 255, .28);
  --ns-sky-text: #8CC2FF;      /* night: 5.3:1 on the tinted card, where --ns-sky reads 4.29 */
  --ns-teal-soft: rgba(92, 201, 208, .12);
  --ns-teal-line: rgba(92, 201, 208, .28);
  --ns-amber-text: #FFC857; --ns-orange: #F0A46A; --ns-coral: #E8866A;
  --ns-success: #4CC47A; --ns-success-text: #6FD69A; --ns-success-soft: rgba(63, 185, 106, .15);
  --ns-danger: #FF6B5E;  --ns-danger-text: #FF8A80;  --ns-danger-soft: rgba(255, 107, 94, .15);
  --ns-warn-text: #FFC857; --ns-warn-soft: rgba(255, 173, 14, .14);
  --ns-info: #6AAEFF;
  --ns-bg: #08171D;
  --ns-surface: #0E222B;
  --ns-surface-2: #142E39;
  --ns-border: #1D3D4A;
  --ns-border-strong: #295263;
  --ns-text: #E6F0F2;
  --ns-text-2: #B5CBD1;
  --ns-muted: #8CA6AE;
  --ns-sidebar-text: #C6D9DE;
  --ns-primary-btn: #17777E;
  --ns-chrome-900: #0F5A60; --ns-chrome-800: #17777E; --ns-chrome-700: #1C8A92; --ns-chrome-600: #7FD6DC;
  --ns-chrome-300: #24606A; --ns-chrome-200: #1A4A52; --ns-chrome-100: #133A42; --ns-chrome-50: #0F2F36;
  --ns-chrome-text: #BDEDF0;
  --ns-tint-teal: #133A42; --ns-tint-teal-line: #24606A; --ns-tint-teal-text: #7FD6DC;
  --ns-btn-primary: linear-gradient(180deg, #1C8A92 0%, #17777E 55%, #136A70 100%);
  --ns-btn-primary-hover: linear-gradient(180deg, #22979F 0%, #1C8A92 55%, #17777E 100%);
  --ns-btn-chrome: linear-gradient(180deg, #133A42 0%, #0F2F36 100%);
  --ns-btn-chrome-hover: linear-gradient(180deg, #174650 0%, #133A42 100%);
  --ns-btn-tint: linear-gradient(180deg, #174650 0%, #133A42 100%);
  --ns-btn-tint-hover: linear-gradient(180deg, #1C525C 0%, #174650 100%);
  --ns-bar-fill: linear-gradient(90deg, #4CC2C9 0%, #4CC2C9 35%, #FFC24D 75%, #F0A46A 100%);
  --ns-btn-amber: linear-gradient(180deg, #FFC24D 0%, #FFAD0E 55%, #E89A00 100%);
  --ns-btn-amber-hover: linear-gradient(180deg, #FFCC66 0%, #FFB82E 55%, #F2A30A 100%);
  --ns-on-amber: #2B1C00; --ns-amber-edge: #C98300; --ns-amber-soft: rgba(255, 194, 77, .14);
  --ns-tint-amber: #3A2C10; --ns-tint-amber-line: #6B4F12; --ns-tint-amber-text: #FFC857;
  --ns-chart-1: #4CC2C9; --ns-chart-2: #FFC24D; --ns-chart-3: #F0A46A;
  --ns-chart-4: #6AAEFF; --ns-chart-5: #E8866A; --ns-chart-6: #8FB0C6;
  --ns-highlight: inset 0 1px 0 rgba(255, 255, 255, .16);
  --ns-highlight-light: inset 0 1px 0 rgba(255, 255, 255, .06);
  --ns-lift: 0 1px 2px rgba(0, 0, 0, .35);
  --ns-motion-up: rgba(92, 201, 208, .22); --ns-motion-down: rgba(240, 164, 106, .2);
  --ns-overlay: rgba(0, 0, 0, .6);
  --ns-shadow: 0 6px 24px rgba(0, 0, 0, .25);
  --ns-shadow-lg: 0 18px 48px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --ns-fast: 0ms; --ns-mid: 0ms; }
}