/* ============================================================
   CoolPlanet Application Design System — Tokens
   Single source of truth for color, type, spacing, radii, motion.
   All semantic tokens swap between [data-theme="light"] / "dark".
   ============================================================ */

/* ----- Base palette (raw, theme-agnostic) ----- */
:root {
  /* Neutrals — lightly forest-tinted scale.
     Pure neutrals would feel disconnected from the brand; this scale carries a
     whisper of green so every surface reads as part of the CoolPlanet world. */
  --n-0:   #FFFFFF;
  --n-25:  #F4F5F3;
  --n-50:  #E5E7E4;
  --n-75:  #D6D9D5;
  --n-100: #C7CAC6;
  --n-200: #ACB0AB;
  --n-300: #8A8E8A;
  --n-400: #686C68;
  --n-500: #4C504D;
  --n-600: #383B39;
  --n-700: #2A2D2C;
  --n-750: #232524;
  --n-800: #1B1D1D;
  --n-850: #15181A;
  --n-900: #0F1213;
  --n-950: #080A0B;

  /* Forest — PRIMARY brand, sampled from app.coolplanet.com.au theme color #2F6230 */
  --forest-50:  #ECF2EC;
  --forest-100: #D2E0D2;
  --forest-200: #A8C5A7;
  --forest-300: #79A578;
  --forest-400: #4D854D;
  --forest-500: #2F6230;   /* core brand — from app's <meta name="theme-color"> */
  --forest-600: #244D25;
  --forest-700: #1A3A1C;
  --forest-800: #112612;
  --forest-900: #0A170B;

  /* Lime — marketing-site flourish from the gradient.
     Reserved for decorative motifs and one slot in the data-viz palette.
     NOT the primary brand colour. */
  --lime-50:  #F4F6E0;
  --lime-100: #E6EBB8;
  --lime-200: #D5DD8A;
  --lime-300: #C3CD5C;
  --lime-400: #B2BD2F;
  --lime-500: #A6B22B;
  --lime-600: #8A9722;
  --lime-700: #6E7A1B;
  --lime-800: #4F5713;
  --lime-900: #30360B;

  /* Sage — mid-green, sits between forest and lime; used for charts and secondary accents */
  --green-50:  #E6F0DE;
  --green-100: #C8DEB7;
  --green-200: #A6C98C;
  --green-300: #82B05F;
  --green-400: #689739;
  --green-500: #5A8A2A;
  --green-600: #4A7223;
  --green-700: #38571B;
  --green-800: #283E13;
  --green-900: #16240A;

  /* Teal — deep gradient base */
  --teal-50:  #DCEDF0;
  --teal-100: #B0D5DA;
  --teal-200: #7DB7C0;
  --teal-300: #4A98A5;
  --teal-400: #237B8B;
  --teal-500: #165862;   /* core */
  --teal-600: #114650;
  --teal-700: #0D363D;
  --teal-800: #08252A;
  --teal-900: #051519;

  /* Cyan — accent glow */
  --cyan-50:  #DEF2F5;
  --cyan-100: #B8E2E8;
  --cyan-200: #8FCDD6;
  --cyan-300: #5BB6C4;
  --cyan-400: #3FA0B0;
  --cyan-500: #2F8693;
  --cyan-600: #246873;
  --cyan-700: #1A4E56;
  --cyan-800: #11353A;
  --cyan-900: #081C20;

  /* Functional — success/warning/danger/info */
  --success-400: #4FB272;
  --success-500: #3D9659;
  --warning-400: #E6B12E;
  --warning-500: #C49321;
  --danger-400:  #E26A5B;
  --danger-500:  #C44E40;
  --info-400:    #4A9BD1;
  --info-500:    #3C7FAE;

  /* Data-viz categorical (10 hues, harmonised lightness)
     Optimised for legibility on both light and dark surfaces.
     Forest leads; lime/sage support; cool accents balance. */
  --dv-1:  #2F6230;  /* forest — primary */
  --dv-2:  #5A8A2A;  /* sage */
  --dv-3:  #165862;  /* teal */
  --dv-4:  #3FA0B0;  /* cyan */
  --dv-5:  #B2BD2F;  /* lime accent */
  --dv-6:  #C49321;  /* amber */
  --dv-7:  #C44E40;  /* coral */
  --dv-8:  #7B5BC4;  /* iris */
  --dv-9:  #D17BB0;  /* rose */
  --dv-10: #4A7DB8;  /* steel */
  --dv-11: #6E7A1B;  /* olive */
  --dv-12: #79A578;  /* moss */

  /* Editorial data grammar — chart code should start here, not invent a
     palette per module. Celestine carries the series under discussion;
     ink establishes the baseline; quiet greys carry comparison and context.
     Functional states still use the semantic success/warning/danger tokens.
     These are intentionally roles, not a second categorical palette. */
  --viz-lead: #0EA3B2;
  --viz-lead-bright: #11CADB;
  --viz-ink: #131515;
  --viz-muted: #7C8284;
  --viz-grid: rgba(19,21,21,.10);
  --viz-fill-lead: color-mix(in oklab, var(--viz-lead) 24%, transparent);
  --viz-fill-muted: color-mix(in oklab, var(--viz-muted) 14%, transparent);

  /* ----- Typography -----
     Brand stack mirrors what coolplanet.com.au uses (a Söhne-family geometric
     humanist sans). We render with General Sans (Fontshare, free for commercial
     use) — the closest free analogue — and cascade to Söhne/system fallbacks. */
  --font-sans: "General Sans", "Söhne", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-display: "General Sans", "Söhne", "Inter", -apple-system, sans-serif;

  /* Type scale — 1.125 perfect-fourth-ish, balanced SaaS */
  --fs-display-2xl: 64px;
  --fs-display-xl:  52px;
  --fs-display-lg:  44px;
  --fs-display-md:  36px;
  --fs-h1: 30px;
  --fs-h2: 24px;
  --fs-h3: 20px;
  --fs-h4: 18px;
  --fs-body-lg: 16px;
  --fs-body:    14px;
  --fs-body-sm: 13px;
  --fs-caption: 12px;
  --fs-micro:   11px;

  --lh-tight: 1.08;
  --lh-snug:  1.2;
  --lh-base:  1.45;
  --lh-relaxed: 1.6;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-base: 0;
  --tracking-wide: 0.02em;
  --tracking-mega: 0.08em;

  /* ----- Spacing scale (4px base) ----- */
  --sp-0: 0;
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 20px;
  --sp-7: 24px;
  --sp-8: 32px;
  --sp-9: 40px;
  --sp-10: 48px;
  --sp-11: 64px;
  --sp-12: 80px;
  --sp-13: 96px;
  --sp-14: 128px;

  /* ----- Radii ----- */
  --r-none: 0;
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* ----- Motion ----- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.5,0,.2,1);
  --d-fast: 120ms;
  --d-base: 200ms;
  --d-slow: 360ms;

  /* ----- Z layers ----- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-modal: 1100;
  --z-toast: 1200;
}

/* ============================================================
   SEMANTIC TOKENS — Light theme (default)
   ============================================================ */
:root,
[data-theme="light"] {
  /* Surface */
  /* Surface hierarchy — keep these in lockstep with the approved specimen.
     Canvas is deliberately quiet; colour belongs to data, not page chrome. */
  --surface-canvas: #F4F5F5;
  --surface-elevated: #F0F5F6; /* mist: orientation / module entry */
  --surface-raised: #FBFCFC;   /* paper: primary content */
  --surface-sunken: #EDEFEF;  /* well: nested or secondary content */
  --surface-deep-well: #E6E8E8;
  --surface-graphite: #222525;
  --surface-overlay: rgba(255,255,255,.7);
  --surface-scrim: rgba(15,15,15,.5);
  --surface-inverse: #101010;

  /* Compatibility aliases used by the migrated module CSS. They name the
     same five roles above; they must never become a second palette. */
  --bg-canvas: var(--surface-canvas);
  --bg-paper: var(--surface-raised);
  --bg-well: var(--surface-sunken);
  --bg-deep-well: var(--surface-deep-well);
  --bg-mist: var(--surface-elevated);

  /* Border */
  --border-subtle: rgba(15,15,15,.06);
  --border-default: rgba(15,15,15,.10);
  --border-strong: rgba(15,15,15,.18);
  --border-inverse: rgba(255,255,255,.15);

  /* Text */
  --text-primary: var(--n-900);
  --text-secondary: var(--n-600);
  --text-tertiary: var(--n-400);
  --text-disabled: var(--n-300);
  --text-inverse: var(--n-0);
  --text-on-brand: #06343C;     /* DS-01 ph2: dark ink on bright-teal brand (was #FFF on forest) */

  /* Brand / interactive — specimen teal is primary (DS-01 ph2, was forest) */
  --brand: #0EA3B2;                       /* specimen --accent (was forest #2F6230) */
  --brand-hover: #0B8794;
  --brand-active: #0B6767;
  --brand-subtle: #DCEDF0;                /* light teal tint (was forest-50 #ECF2EC) */
  --brand-strong: #0B6767;                /* deep teal — brand text on light (was forest #244D25) */

  --accent-lime: var(--lime-400);         /* marketing flourish, sparingly */
  --accent-teal: var(--teal-500);
  --accent-cyan: var(--cyan-400);
  --inverse-accent: var(--accent-lime);  /* readable on dark inverse surface in light mode */

  /* Focus — teal, sits inside the brand family (DS-01 ph2) */
  --focus-ring: #0EA3B2;

  /* Status */
  --status-success: var(--success-500);
  --status-success-bg: #E5F2EB;
  --status-warning: var(--warning-500);
  --status-warning-bg: #FAEFD0;
  --status-danger: var(--danger-500);
  --status-danger-bg: #FBE3DE;
  --status-info: var(--info-500);
  --status-info-bg: #DDECF6;

  /* Shadow (subtle for light) */
  --shadow-xs: 0 1px 2px rgba(15,15,15,.04);
  --shadow-sm: 0 2px 4px rgba(15,15,15,.05), 0 1px 2px rgba(15,15,15,.04);
  --shadow-md: 0 6px 16px -4px rgba(15,15,15,.08), 0 2px 4px rgba(15,15,15,.04);
  --shadow-lg: 0 16px 40px -8px rgba(15,15,15,.12), 0 4px 8px rgba(15,15,15,.04);
  --shadow-xl: 0 30px 70px -12px rgba(15,15,15,.18);
}

/* ============================================================
   SEMANTIC TOKENS — Dark theme
   ============================================================ */
[data-theme="dark"] {
  /* The specimen's deliberate graphite ladder. Dark mode is not a black
     canvas with light cards dropped on it: each role climbs one quiet step. */
  --surface-canvas: #303030;
  --surface-elevated: #3B4749;
  --surface-raised: #3A3E3E;
  --surface-sunken: #464B4C;
  --surface-deep-well: #4C5254;
  --surface-graphite: #272A2A;
  --surface-overlay: rgba(58,62,62,.75);
  --surface-scrim: rgba(16,16,16,.65);
  --surface-inverse: #101010;

  --bg-canvas: var(--surface-canvas);
  --bg-paper: var(--surface-raised);
  --bg-well: var(--surface-sunken);
  --bg-deep-well: var(--surface-deep-well);
  --bg-mist: var(--surface-elevated);

  --border-subtle: rgba(255,255,255,.07);
  --border-default: rgba(255,255,255,.11);
  --border-strong: rgba(255,255,255,.20);
  --border-inverse: rgba(15,15,15,.15);

  --text-primary: #F2F2F2;
  --text-secondary: #C8CBCB;
  --text-tertiary: #9AA0A0;
  --text-disabled: #7C8284;
  --text-inverse: #131515;
  --text-on-brand: #06343C;        /* DS-01 ph2: dark ink on bright-teal brand */

  --fg-primary: #F2F2F2;
  --fg-secondary: #C8CBCB;
  --fg-tertiary: #9AA0A0;
  --fg-quaternary: #7C8284;
  --border-primary: rgba(242,242,242,.10);
  --border-secondary: rgba(242,242,242,.20);
  --ink-on-inverted: #F2F2F2;

  --brand: #11CADB;                        /* specimen dark teal (was forest #4D854D) */
  --brand-hover: #3FD3E2;
  --brand-active: #0EA3B2;
  --brand-subtle: rgba(17,202,219,.16);    /* translucent teal (was forest) */
  --brand-strong: #7ADEE9;                 /* light teal — brand text on dark (was forest-300) */

  --accent-lime: var(--lime-300);
  --accent-teal: var(--teal-300);
  --accent-cyan: var(--cyan-300);
  --inverse-accent: var(--forest-700);   /* dark accent for light inverse surface in dark mode */

  --focus-ring: #7ADEE9;

  --accent: #11CADB;
  --accent-bright: #11CADB;
  --accent-deep: #0EA3B2;
  --accent-text: #7ADEE9;
  --accent-tint: rgba(17,202,219,.10);
  --accent-tint-strong: rgba(17,202,219,.26);

  /* Keep the same chart grammar in dark mode: bright Celestine leads;
     the baseline becomes light ink and comparison recedes to graphite. */
  --viz-lead: #11CADB;
  --viz-lead-bright: #7ADEE9;
  --viz-ink: #F1F5F1;
  --viz-muted: #9AA0A0;
  --viz-grid: rgba(241,245,241,.12);
  --viz-fill-lead: color-mix(in oklab, var(--viz-lead) 28%, transparent);
  --viz-fill-muted: color-mix(in oklab, var(--viz-muted) 16%, transparent);

  --status-success: var(--success-400);
  --status-success-bg: rgba(79,178,114,.14);
  --status-warning: var(--warning-400);
  --status-warning-bg: rgba(230,177,46,.14);
  --status-danger: var(--danger-400);
  --status-danger-bg: rgba(226,106,91,.14);
  --status-info: var(--info-400);
  --status-info-bg: rgba(74,155,209,.14);

  --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
  --shadow-sm: 0 2px 4px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
  --shadow-md: 0 6px 16px -4px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.25);
  --shadow-lg: 0 16px 40px -8px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.35);
  --shadow-xl: 0 30px 70px -12px rgba(0,0,0,.65);
}