/* ============================================================
   Design System — Variables
   Palette primitives, then colour roles per mode, then type,
   spacing, radius, sizing, elevation and interaction states.
   A [data-theme] attribute on any element forces a mode inside it.
   ============================================================ */

:root{
  /* ---------- palette: monochrome action scale (black, white and grey only) ---------- */
  --accent-50:#fafafa;
  --accent-100:#f3f3f3;
  --accent-200:#e5e5e5;
  --accent-300:#d1d1d1;
  --accent-400:#a3a3a3;
  --accent-500:#737373;
  --accent-600:#525252;
  --accent-700:#404040;
  --accent-800:#262626;
  --accent-900:#171717;
  --accent-950:#0a0a0a;

  /* ---------- palette: neutral grayscale ---------- */
  --neutral-0:#ffffff;
  --neutral-50:#fafafa;
  --neutral-100:#f3f3f3;
  --neutral-200:#e5e5e5;
  --neutral-300:#d1d1d1;
  --neutral-400:#a3a3a3;
  --neutral-500:#737373;
  --neutral-600:#525252;
  --neutral-700:#404040;
  --neutral-800:#262626;
  --neutral-900:#171717;
  --neutral-950:#0a0a0a;
  --neutral-1000:#000000;

  /* ---------- status: greys only, told apart by icon and label rather than hue ---------- */
  --success-600:#262626;
  --success-400:#d1d1d1;
  --warning-600:#525252;
  --warning-400:#a3a3a3;
  --danger-800:#0a0a0a;
  --danger-700:#262626;
  --danger-600:#404040;
  --danger-400:#a3a3a3;
  --danger-300:#d1d1d1;
  --danger-200:#e5e5e5;

  /* ---------- typeface ---------- */
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Helvetica Neue',system-ui,'Segoe UI',Roboto,sans-serif;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  /* ---------- type styles (web) — size / line height ---------- */
  --display-size:48px;  --display-line:56px;
  --h1-size:36px;       --h1-line:44px;
  --h2-size:28px;       --h2-line:36px;
  --h3-size:22px;       --h3-line:30px;
  --title-size:18px;    --title-line:26px;
  --body-lg-size:16px;  --body-lg-line:26px;
  --body-size:14px;     --body-line:22px;
  --label-size:13px;    --label-line:18px;
  --caption-size:12px;  --caption-line:16px;
  --overline-size:12px; --overline-line:16px;

  /* ---------- spacing ---------- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;

  /* ---------- radius ---------- */
  --radius-none:0;
  /* A consistently soft, rounded language across controls and surfaces. */
  --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-2xl:28px;
  --radius-full:999px;

  /* ---------- sizing ---------- */
  --control-sm:32px;
  --control-md:40px;
  --control-lg:48px;
  --touch-min:44px;
  --icon-xs:14px;
  --icon-sm:16px;
  --icon-md:20px;
  --icon-lg:24px;

  /* ---------- border ---------- */
  --border-width:1px;
  --border-width-strong:2px;
  --focus-offset:2px;

  /* ---------- interaction timing ---------- */
  --duration-instant:100ms;
  --duration-fast:150ms;
  --duration-base:250ms;
  --duration-slow:400ms;
  --duration-slower:600ms;

  --ease-standard:cubic-bezier(0.2,0,0,1);
  --ease-enter:cubic-bezier(0.05,0.7,0.1,1);
  --ease-exit:cubic-bezier(0.3,0,0.8,0.15);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --ease-linear:linear;

  /* ---------- opacity ---------- */
  --opacity-hover:.08;
  --opacity-pressed:.12;
  --opacity-disabled:.4;
}

/* ---------- mobile type styles: below 640px ---------- */
@media (max-width:639px){
  :root{
    --display-size:34px;  --display-line:40px;
    --h1-size:28px;       --h1-line:34px;
    --h2-size:24px;       --h2-line:30px;
    --h3-size:20px;       --h3-line:26px;
    --title-size:17px;    --title-line:24px;
    --body-lg-size:17px;  --body-lg-line:26px;
    --body-size:16px;     --body-line:24px;
    --label-size:15px;    --label-line:20px;
    --caption-size:13px;  --caption-line:18px;
    --overline-size:12px; --overline-line:16px;
  }
}

/* ============================================================
   Colour roles — light
   ============================================================ */
:root,
[data-theme="light"]{
  color-scheme:light;

  --bg:var(--neutral-100);
  --nav-bg:#ffffff;
  --surface:var(--neutral-0);
  --surface-sunken:var(--neutral-100);
  --surface-hover:var(--neutral-200);
  --surface-pressed:var(--neutral-300);

  --text:var(--neutral-950);
  --text-secondary:var(--neutral-700);
  --text-tertiary:var(--neutral-600);
  --on-accent:var(--neutral-0);

  --border:rgba(0,0,0,.20);
  --border-strong:rgba(0,0,0,.46);
  --grid-line:rgba(0,0,0,.045);

  --accent:var(--accent-900);
  --accent-hover:var(--accent-800);
  --accent-pressed:var(--accent-950);
  --accent-tint:var(--accent-200);
  --accent-tint-strong:var(--accent-300);
  --accent-text:var(--accent-900);
  --focus-ring:var(--accent-900);

  --success:var(--success-600);
  --success-tint:rgba(0,0,0,.08);
  --warning:var(--warning-600);
  --warning-tint:rgba(0,0,0,.08);
  --danger:var(--danger-600);
  --danger-hover:var(--danger-700);
  --danger-pressed:var(--danger-800);
  --danger-tint:rgba(0,0,0,.08);
  --on-danger:var(--neutral-0);

  --disabled-bg:var(--neutral-200);
  --disabled-text:var(--neutral-400);

  --inverse-surface:var(--neutral-900);
  --inverse-text:var(--neutral-100);
  --inverse-accent:var(--accent-300);

  --scrim:rgba(0,0,0,.48);

  --shadow-1:0 1px 2px rgba(0,0,0,.08);
  --shadow-2:0 2px 6px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);
  --shadow-3:0 8px 20px rgba(0,0,0,.10),0 2px 6px rgba(0,0,0,.06);
  --shadow-4:0 20px 48px rgba(0,0,0,.16),0 4px 12px rgba(0,0,0,.08);
}

/* ============================================================
   Colour roles — dark (system preference, and forced)
   ============================================================ */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;

    --bg:var(--neutral-950);
    --nav-bg:var(--neutral-900);
    --surface:var(--neutral-900);
    --surface-sunken:var(--neutral-1000);
    --surface-hover:var(--neutral-800);
    --surface-pressed:var(--neutral-700);

    --text:var(--neutral-50);
    --text-secondary:var(--neutral-300);
    --text-tertiary:var(--neutral-400);
    --on-accent:var(--neutral-1000);

    --border:rgba(255,255,255,.18);
    --border-strong:rgba(255,255,255,.42);
    --grid-line:rgba(255,255,255,.035);

    --accent:var(--accent-100);
    --accent-hover:var(--neutral-0);
    --accent-pressed:var(--accent-300);
    --accent-tint:rgba(255,255,255,.14);
    --accent-tint-strong:rgba(255,255,255,.24);
    --accent-text:var(--accent-100);
    --focus-ring:var(--accent-300);

    --success:var(--success-400);
    --success-tint:rgba(255,255,255,.12);
    --warning:var(--warning-400);
    --warning-tint:rgba(255,255,255,.12);
    --danger:var(--danger-400);
    --danger-hover:var(--danger-300);
    --danger-pressed:var(--danger-200);
    --danger-tint:rgba(255,255,255,.12);
    --on-danger:var(--neutral-1000);

    --disabled-bg:var(--neutral-800);
    --disabled-text:var(--neutral-600);

    --inverse-surface:var(--neutral-100);
    --inverse-text:var(--neutral-900);
    --inverse-accent:var(--accent-700);

    --scrim:rgba(0,0,0,.60);

    --shadow-1:0 1px 2px rgba(0,0,0,.40);
    --shadow-2:0 2px 6px rgba(0,0,0,.40),0 1px 2px rgba(0,0,0,.30);
    --shadow-3:0 8px 20px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.30);
    --shadow-4:0 20px 48px rgba(0,0,0,.55),0 4px 12px rgba(0,0,0,.35);
  }
}

[data-theme="dark"]{
  color-scheme:dark;

  --bg:var(--neutral-950);
  --nav-bg:var(--neutral-900);
  --surface:var(--neutral-900);
  --surface-sunken:var(--neutral-1000);
  --surface-hover:var(--neutral-800);
  --surface-pressed:var(--neutral-700);

  --text:var(--neutral-50);
  --text-secondary:var(--neutral-300);
  --text-tertiary:var(--neutral-400);
  --on-accent:var(--neutral-1000);

  --border:rgba(255,255,255,.18);
  --border-strong:rgba(255,255,255,.42);
  --grid-line:rgba(255,255,255,.035);

  --accent:var(--accent-100);
  --accent-hover:var(--neutral-0);
  --accent-pressed:var(--accent-300);
  --accent-tint:rgba(255,255,255,.14);
  --accent-tint-strong:rgba(255,255,255,.24);
  --accent-text:var(--accent-100);
  --focus-ring:var(--accent-300);

  --success:var(--success-400);
  --success-tint:rgba(255,255,255,.12);
  --warning:var(--warning-400);
  --warning-tint:rgba(255,255,255,.12);
  --danger:var(--danger-400);
  --danger-hover:var(--danger-300);
  --danger-pressed:var(--danger-200);
  --danger-tint:rgba(255,255,255,.12);
  --on-danger:var(--neutral-1000);

  --disabled-bg:var(--neutral-800);
  --disabled-text:var(--neutral-600);

  --inverse-surface:var(--neutral-100);
  --inverse-text:var(--neutral-900);
  --inverse-accent:var(--accent-700);

  --scrim:rgba(0,0,0,.60);

  --shadow-1:0 1px 2px rgba(0,0,0,.40);
  --shadow-2:0 2px 6px rgba(0,0,0,.40),0 1px 2px rgba(0,0,0,.30);
  --shadow-3:0 8px 20px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.30);
  --shadow-4:0 20px 48px rgba(0,0,0,.55),0 4px 12px rgba(0,0,0,.35);
}