/* IOVO design tokens — shared by /, /about/ and /puronics/.
   Pass 9: graphite surfaces, warm white type, the node's amber as THE accent (CTAs, active states, highlights, numbers).
   Pass 11: a day mode (html[data-theme="light"]), and more of the ring's blue → cyan in both modes as the supporting
   colour: line art, the water line, secondary strokes and icons, soft gradients. Amber stays the primary accent. */
:root {
  color-scheme: dark;
  /* Surfaces: near-black graphite, never navy */
  --ink-0: #07080B;          /* page */
  --ink-1: #0C0E12;          /* raised */
  --ink-2: #14161B;          /* highest */
  --ink-3: #1C1F25;          /* controls on raised */
  --line: rgba(244, 241, 236, .08);
  --line-strong: rgba(244, 241, 236, .15);
  --fg-rgb: 244, 241, 236;   /* the text colour as rgb, for tints: rgba(var(--fg-rgb), .06) */

  /* Text: warm white */
  --text: #F4F1EC;
  --text-2: #A9A59E;
  --text-3: #6F6C67;

  /* The node: THE accent (sampled from the mark: #FFC21F → #FF9A27 → #FF6A2D) */
  --accent: #FF9A27;
  --accent-hi: #FFC247;
  --accent-lo: #FF6A2D;
  --accent-hover: #FFA83D;
  --accent-ink: #1A0E02;     /* text on accent */
  --accent-text: #FF9A27;    /* accent used as text (eyebrows, numbers); deeper in day mode for contrast */
  --accent-soft: rgba(255, 154, 39, .12);
  --amber: var(--accent);
  --ember: var(--accent-lo);
  --node: radial-gradient(circle at 35% 30%, #FFD36B 0%, var(--accent) 45%, var(--accent-lo) 100%);

  /* The ring: blue → cyan. Pass 11: the supporting colour everywhere, not only brand moments */
  --hydro: #0B5FE0;
  --hydro-deep: #0736A8;
  --cyan: #38C8FF;
  --blue: #3D8BFF;           /* secondary strokes, icons, links on hover */
  --blue-text: #6FB0FF;      /* blue used as text */
  --blue-soft: rgba(61, 139, 255, .12);
  --blue-line: rgba(61, 139, 255, .38);
  --ring: linear-gradient(135deg, var(--hydro-deep) 0%, var(--hydro) 45%, var(--cyan) 100%);
  --ring-soft: linear-gradient(90deg, rgba(11, 95, 224, .0), rgba(11, 95, 224, .55) 20%, rgba(56, 200, 255, .8) 50%, rgba(11, 95, 224, .55) 80%, rgba(11, 95, 224, 0));
  --glow-blue: radial-gradient(60% 50% at 50% 0%, rgba(11, 95, 224, .14), transparent 70%);
  /* Legacy name for small highlights (eyebrows, links, thin lines): now the accent */
  --aqua: var(--accent-text);

  /* Status */
  --live: #5FD49A;
  --pilot: var(--accent);
  --soon: var(--text-3);
  --danger: #FF5C6C;

  /* Line art (the flow, mini-UIs): warm white subject, blue architecture, amber moment */
  --art-hi: #F4F1EC;
  --art-mid: #5E93D6;
  --art-lo: #2C4A70;
  --art-fill: #0F1318;
  --rail: linear-gradient(180deg, #2F7BF0, #38C8FF);

  /* Glass surfaces (nav, cards, sheets) */
  --glass: rgba(17, 19, 23, .86);
  --glass-nav: rgba(7, 8, 11, .76);
  --card: #111317;
  --card-border: rgba(244, 241, 236, .1);
  --card-shadow: 0 24px 48px -24px rgba(0, 0, 0, .9);
  --scrim: rgba(4, 5, 7, .74);
  --btn-bg: rgba(20, 22, 27, .6);
  --bg-rgb: 7, 8, 11;        /* the surface colour as rgb, for panels: rgba(var(--bg-rgb), .6) */
  --hl-a: #FFFFFF; --hl-b: #E9E4DB;   /* big headline gradient */
  --plan-bg: linear-gradient(180deg, rgba(16, 42, 98, .62), rgba(12, 14, 18, .6));
  --shadow-c: rgba(0, 0, 0, .75);

  /* Type */
  --font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Radii / motion */
  --r-1: 6px; --r-2: 12px; --r-3: 20px; --r-pill: 999px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-water: cubic-bezier(.45, .05, .25, 1);
  --ease-snap: cubic-bezier(.34, 1.56, .64, 1);
}

/* Day mode: warm paper white, ink text, the same amber (deeper when it is text), blue line art. */
html[data-theme="light"] {
  color-scheme: light;
  --ink-0: #F7F6F2;
  --ink-1: #FFFFFF;
  --ink-2: #EEECE6;
  --ink-3: #E4E1DA;
  --line: rgba(17, 20, 28, .09);
  --line-strong: rgba(17, 20, 28, .17);
  --fg-rgb: 17, 20, 28;

  --text: #12151C;
  --text-2: #4B5059;
  --text-3: #7D818A;

  --accent: #FF9A27;
  --accent-hi: #FFB547;
  --accent-lo: #F2701E;
  --accent-hover: #FF8C12;
  --accent-ink: #1A0E02;
  --accent-text: #C4600A;
  --accent-soft: rgba(255, 154, 39, .14);

  --blue: #1F6FE5;
  --blue-text: #1A62D0;
  --blue-soft: rgba(31, 111, 229, .09);
  --blue-line: rgba(31, 111, 229, .32);
  --ring-soft: linear-gradient(90deg, rgba(11, 95, 224, 0), rgba(11, 95, 224, .5) 20%, rgba(20, 170, 235, .75) 50%, rgba(11, 95, 224, .5) 80%, rgba(11, 95, 224, 0));
  --glow-blue: radial-gradient(60% 50% at 50% 0%, rgba(31, 111, 229, .08), transparent 70%);

  --live: #16A36A;
  --danger: #D93445;

  --art-hi: #161A22;
  --art-mid: #2F74DA;
  --art-lo: #B8C9E2;
  --art-fill: #FFFFFF;
  --rail: linear-gradient(180deg, #1F6FE5, #14AEEA);

  --glass: rgba(255, 255, 255, .9);
  --glass-nav: rgba(247, 246, 242, .82);
  --card: #FFFFFF;
  --card-border: rgba(17, 20, 28, .09);
  --card-shadow: 0 1px 2px rgba(17, 20, 28, .05), 0 18px 40px -22px rgba(17, 20, 28, .28);
  --scrim: rgba(17, 20, 28, .38);
  --btn-bg: rgba(255, 255, 255, .72);
  --bg-rgb: 255, 255, 255;
  --hl-a: #12151C; --hl-b: #3B414C;
  --plan-bg: linear-gradient(180deg, rgba(31, 111, 229, .1), rgba(255, 255, 255, .9));
  --shadow-c: rgba(17, 20, 28, .16);
}
/* Dark stages: the studio renders and the phone video are night scenes; in day mode they stay dark bands. */
html[data-theme="light"] :is(.moment, .seq, .roy-screen, .dz-in, .dark-stage) {
  color-scheme: dark;
  --ink-0: #07080B; --ink-1: #0C0E12; --ink-2: #14161B; --ink-3: #1C1F25;
  --line: rgba(244, 241, 236, .08); --line-strong: rgba(244, 241, 236, .15);
  --fg-rgb: 244, 241, 236; --bg-rgb: 7, 8, 11;
  --text: #F4F1EC; --text-2: #A9A59E; --text-3: #6F6C67;
  --accent-text: #FF9A27; --hl-a: #FFFFFF; --hl-b: #E9E4DB; --shadow-c: rgba(0, 0, 0, .75);
  color: var(--text);
}

/* Theme B (variant study only, `?theme=b`): cool graphite, steel-blue line art, same amber accent. */
html.theme-b {
  --ink-0: #08090C; --ink-1: #0D0F13; --ink-2: #15181D;
  --text: #EEF1F5; --text-2: #9DA5B0; --text-3: #626A75;
  --line: rgba(200, 215, 235, .09); --line-strong: rgba(200, 215, 235, .17);
  --art-hi: #9FD3F0; --art-mid: #4E6E8C; --art-lo: #2A3A4C; --art-fill: #0E1319;
}