/* iGarden INVERX 7 – design tokens.
   Layer 1: primitives (raw values from the product: graphite casing, perforated aluminium, LED edge, iGarden red).
   Layer 2: semantic roles per surface (.surface-dark is the default, .surface-light for aluminium sections).
   Components use layer 2 only. */

:root {
  /* Graphite – cool, slightly blue-biased like the unit's glass front */
  --graphite-950: #0a0c0f;
  --graphite-900: #111418;
  --graphite-850: #161a1f;
  --graphite-800: #1c2127;
  --graphite-700: #282e35;
  --graphite-600: #3a414a;
  --graphite-500: #59616b;
  --graphite-400: #7f8791;

  /* Aluminium – perforated casing */
  --alu-50: #f6f7f9;
  --alu-100: #eceef2;
  --alu-200: #dfe2e8;
  --alu-300: #c9cdd5;
  --alu-400: #aeb3bc;

  /* LED blue – the light edge of the glass front (#31BBEE sampled from renders) */
  --led-300: #8adcf7;
  --led-400: #5bcbf3;
  --led-500: #31bbee;
  --led-600: #1a9ccf;
  --led-700: #0f76a0;

  /* iGarden red – brand accent, used sparingly */
  --red-400: #ff5c66;
  --red-500: #ee2e39;
  --red-600: #c81e29;

  /* Status */
  --green-500: #3dbf7e;
  --green-700: #1f7d4f;
  --amber-500: #f2a33a;
  --amber-700: #9a5d00;

  /* Type */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --stretch-display: 118%; /* expanded, echoes the INVERX 7 wordmark */
  --stretch-body: 100%;
  --stretch-mono: 100%;

  --text-hero: clamp(3rem, 1.6rem + 6.2vw, 7rem);          /* 48 → 112 px */
  --text-data: clamp(3.5rem, 2rem + 7vw, 8rem);           /* 56 → 128 px, big numbers */
  --text-display: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem); /* 36 → 72 px */
  --text-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);     /* 28 → 44 px */
  --text-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);    /* 20 → 26 px */
  --text-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); /* 18 → 21 px */
  --text-body: 1.0625rem;                                 /* 17 px */
  --text-small: 0.875rem;                                 /* 14 px */
  --text-label: 0.75rem;                                  /* 12 px, mono uppercase */

  --weight-display: 720;
  --weight-heading: 640;
  --weight-body: 400;
  --weight-strong: 600;

  --leading-tight: 1.02;
  --leading-snug: 1.2;
  --leading-body: 1.6;
  --tracking-display: -0.025em;
  --tracking-label: 0.12em;

  /* Space – 4 px base, spacious marketing rhythm */
  --space-1: 0.25rem;  /*   4 */
  --space-2: 0.5rem;   /*   8 */
  --space-3: 0.75rem;  /*  12 */
  --space-4: 1rem;     /*  16 */
  --space-5: 1.5rem;   /*  24 */
  --space-6: 2rem;     /*  32 */
  --space-7: 3rem;     /*  48 */
  --space-8: 4rem;     /*  64 */
  --space-9: 6rem;     /*  96 */
  --space-10: 8rem;    /* 128 */
  --space-section: clamp(6rem, 3rem + 10vw, 12rem); /* 96 → 192 px between sections */
  --gutter: clamp(16px, 4vw, 48px);
  --content-max: 1280px;
  --text-max: 64ch;

  /* Shape – the unit is boxy with chamfered edges */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;
  --radius-pill: 999px;
  --chamfer: 14px; /* cut-corner size for angled frames */

  /* Motion. GSAP equivalents: ease-out ≈ power3.out, in-out ≈ power2.inOut, emphasis ≈ expo.out, exit ≈ power2.in */
  --dur-instant: 100ms;  /* press feedback */
  --dur-fast: 160ms;     /* hover, small state changes */
  --dur-base: 240ms;     /* buttons, chips, overlays fading */
  --dur-slow: 420ms;     /* panels, cards entering */
  --dur-slower: 700ms;   /* section reveals */
  --dur-cinematic: 1200ms; /* hero entrance, one per page */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --scroll-scrub: 1; /* ScrollTrigger scrub smoothing in seconds */
}

/* Semantic roles. The page has a fixed art direction and does not follow the visitor's OS theme. */
:root,
.surface-dark {
  --bg: var(--graphite-900);
  --bg-raised: var(--graphite-850);
  --bg-sunken: var(--graphite-950);
  --fg: var(--alu-50);
  --fg-muted: var(--graphite-400);
  --line: var(--graphite-700);
  --line-strong: var(--graphite-600);
  --accent: var(--led-500);
  --accent-text: var(--led-400);
  --accent-glow: rgb(49 187 238 / 0.45);
  --brand: var(--red-500);
  --brand-text: var(--red-400);
  --focus: var(--led-400);
  --ok: var(--green-500);
  --warn: var(--amber-500);
  --error: var(--red-400);
  --tier-special: var(--red-500);
  --tier-intro: var(--led-500);
  --tier-sale: var(--alu-300);
  --shadow-raised: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 24px 48px -24px rgb(0 0 0 / 0.7);
  --glow-led: 0 0 0 1px var(--accent), 0 0 18px var(--accent-glow), 0 0 56px -8px var(--accent-glow);
  color-scheme: dark;
}

.surface-light {
  --bg: var(--alu-50);
  --bg-raised: #ffffff;
  --bg-sunken: var(--alu-100);
  --fg: var(--graphite-900);
  --fg-muted: var(--graphite-500);
  --line: var(--alu-200);
  --line-strong: var(--alu-300);
  --accent: var(--led-600);
  --accent-text: var(--led-700);
  --accent-glow: rgb(26 156 207 / 0.3);
  --brand: var(--red-500);
  --brand-text: var(--red-600);
  --focus: var(--led-600);
  --ok: var(--green-700);
  --warn: var(--amber-700);
  --error: var(--red-600);
  --tier-special: var(--red-600);
  --tier-intro: var(--led-700);
  --tier-sale: var(--graphite-600);
  --shadow-raised: 0 1px 2px rgb(17 20 24 / 0.06), 0 24px 48px -28px rgb(17 20 24 / 0.35);
  --glow-led: 0 0 0 1px var(--accent), 0 0 18px var(--accent-glow);
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-slower: 1ms;
    --dur-cinematic: 1ms;
  }
}