/* Optronix v4 design tokens. Every colour, size and timing on the redesigned site
   comes from here. Brand: dark-first, Optronix purple, the logo mark's violet-to-cyan
   gradient as the accent, green only for sustainability, warm paper for light sections. */
:root {
  /* ink: the dark surfaces, slightly violet so the purple sits in them */
  --ink-0: #050508;          /* deepest: page background behind heroes */
  --ink-1: #08080d;          /* page background */
  --ink-2: #0e0e15;          /* raised: cards, panels */
  --ink-3: #15151f;          /* raised hover / inputs */
  --ink-4: #1d1d2a;          /* highest: popovers */
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-3: rgba(255, 255, 255, 0.24);

  /* text on dark */
  --fg: #f4f4f8;
  --fg-2: #b9bacb;           /* body copy */
  --fg-3: #8486a0;           /* captions, meta */
  --fg-4: #5d5f78;           /* faint labels */

  /* Optronix purple (from the live site) */
  --ox-50: #eef0ff;
  --ox-100: #d9daf6;
  --ox-200: #c5c7ff;
  --ox-300: #a1a3ff;
  --ox-400: #8e91f7;
  --ox-500: #7b7ef2;         /* primary */
  --ox-600: #5a5dc7;         /* primary dark */
  --ox-700: #43459a;
  --ox-800: #2b2d66;
  --ox-900: #17183a;

  /* the logo mark's gradient: violet, through blue, to cyan */
  --violet: #8c52ff;
  --blue: #6fa8f0;
  --cyan: #5ce1e6;
  --grad-mark: linear-gradient(135deg, var(--violet) 0%, var(--blue) 52%, var(--cyan) 100%);
  --grad-ox: linear-gradient(135deg, var(--ox-300) 0%, var(--ox-500) 45%, var(--ox-600) 100%);
  --glow-ox: 0 0 0 1px rgba(123, 126, 242, 0.35), 0 10px 40px -10px rgba(123, 126, 242, 0.55);

  /* sustainability only */
  --green: #7ed957;
  --green-2: #9cf77a;
  --green-ink: #08230f;

  /* light sections */
  --paper: #f5f5f2;
  --paper-2: #ecebe5;
  --paper-line: rgba(11, 11, 18, 0.10);
  --paper-fg: #0b0b12;
  --paper-fg-2: #3c3d52;
  --paper-fg-3: #6b6d84;

  /* status */
  --ok: #7ed957;
  --warn: #f5b84a;
  --bad: #f2647b;

  /* type */
  --font-sans: "Google Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-display: clamp(3rem, 1.6rem + 6.2vw, 8.25rem);   /* hero */
  --fs-h1: clamp(2.5rem, 1.6rem + 3.9vw, 5.5rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.6vw, 4rem);
  --fs-h3: clamp(1.375rem, 1.15rem + 0.9vw, 2rem);
  --fs-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --fs-lead: clamp(1.125rem, 1.02rem + 0.45vw, 1.4rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-mono: 0.75rem;                                       /* mono labels, uppercase */
  --lh-tight: 0.98;
  --lh-head: 1.06;
  --lh-body: 1.6;
  --track-display: -0.035em;
  --track-head: -0.025em;
  --track-mono: 0.12em;

  /* space and layout */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 176px;
  --section-y: clamp(88px, 6vw + 48px, 176px);
  --gutter: clamp(16px, 3.2vw, 40px);
  --max: 1440px;
  --max-text: 68ch;
  --header-h: 76px;

  /* shape: the brand is angular (the X mark), so radii stay small */
  --r-1: 4px; --r-2: 8px; --r-3: 14px; --r-4: 22px; --r-pill: 999px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 160ms; --t-med: 320ms; --t-slow: 700ms; --t-xslow: 1200ms;

  /* layers */
  --z-header: 100; --z-menu: 200; --z-transition: 900; --z-cursor: 1000;

  color-scheme: dark;
}

/* ---------------------------------------------------------------------------------
   v4 system additions (system owner). Semantic aliases that components use, so a
   paper section can re-theme every component by remapping a handful of tokens.
   --------------------------------------------------------------------------------- */
:root {
  --accent: var(--ox-500);            /* buttons, fills */
  --accent-2: var(--ox-400);          /* hover fill */
  --accent-text: var(--ox-300);       /* purple text that must stay readable (eyebrows, links) */
  --focus: var(--ox-300);             /* focus ring */
  --surface-glass: rgba(10, 10, 16, 0.72);
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 40px -24px rgba(0, 0, 0, 0.7);
  --shadow-2: 0 40px 90px -40px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--line);
  --grad-mark-h: linear-gradient(90deg, var(--violet) 0%, var(--blue) 52%, var(--cyan) 100%);
  --grad-line: linear-gradient(90deg, rgba(140, 82, 255, 0) 0%, var(--violet) 20%, var(--blue) 55%, var(--cyan) 85%, rgba(92, 225, 230, 0) 100%);

  /* lifecycle stages, in ring order (decks palette; Operate takes the mark violet, because
     green is reserved for sustainability) */
  --stage-1: #4fd1f2;   /* Strategy & Advisory */
  --stage-2: #6bb8f5;   /* Acquisition & Commercial */
  --stage-3: #7b7ef2;   /* Design & Engineering */
  --stage-4: #9a7ef0;   /* Build & Delivery */
  --stage-5: #b47ae8;   /* Migration & Transformation */
  --stage-6: #8c52ff;   /* Operate & Optimise */

  --header-h-float: 60px;             /* the floating glass bar after scroll */
  --cut: clamp(28px, 4.2vw, 72px);    /* depth of the angled section edges */
}
@media (max-width: 699px) {
  :root { --header-h: 64px; --header-h-float: 54px; }
}