/* Webloom design tokens.
   Light = "Clear Day" (default). Dark = "Midnight Glass" (html[data-theme="dark"], set by theme.js). */

:root {
  color-scheme: light;

  /* brand */
  --blue: #2F6BFF;
  --on-blue: #FFFFFF;

  /* surface & text */
  --bg: #F4F7FC;
  --ink: #0B1220;
  --muted: #5A6377;
  --line: rgb(11 18 32 / 0.08);
  --line-strong: rgb(11 18 32 / 0.18);
  --accent-text: #2558E6;
  --logo-ink: #0B1220;
  --card-solid: #FFFFFF;
  --seg-active: rgb(255 255 255 / 0.95);
  --success: #17A85B;
  --danger: #D93A3A;

  /* atmosphere: blurred light behind the glass */
  --a1: #8DB8FF;
  --a2: #7FE3E0;
  --a3: #B9CCFF;
  --blob-opacity: 0.7;
  --grain: 0.05;

  /* liquid glass */
  --glass-1: rgb(255 255 255 / 0.66);
  --glass-2: rgb(255 255 255 / 0.36);
  --glass-hi: rgb(255 255 255 / 0.95);
  --rim-a: rgb(255 255 255 / 1);
  --rim-b: rgb(255 255 255 / 0.2);
  --rim-c: rgb(255 255 255 / 0.7);
  --shadow-1: rgb(17 35 80 / 0.06);
  --shadow-2: rgb(17 35 80 / 0.28);
  --blur: 28px;
  --sat: 180%;

  /* linked rings: gradient stops read by rings.js through inline SVG (colour + opacity) */
  --ra0: #FFFFFF; --ra0o: 0.9;
  --ra1: #0B1220; --ra1o: 0.55;
  --ra2: #0B1220; --ra2o: 0.3;
  --ra3: #FFFFFF; --ra3o: 0.6;
  --rb0: #D6E4FF; --rb0o: 0.95;
  --rb1: #2F6BFF; --rb1o: 0.9;
  --rb2: #2F6BFF; --rb2o: 0.6;
  --rb3: #A9C6FF; --rb3o: 0.95;

  /* type */
  --font-head: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lead: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
  --text-h2: clamp(2.5rem, 1.5rem + 3.6vw, 4.75rem);
  --text-display: clamp(3.25rem, 1.4rem + 6.6vw, 8rem);

  /* shape & space */
  --r-xl: 36px;
  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;
  --gap: clamp(12px, 1.4vw, 20px);
  --gutter: clamp(20px, 5vw, 80px);
  --space-section: clamp(5.5rem, 3.5rem + 7vw, 10rem);
  --max: 1240px;
  --header-offset: 104px;

  /* motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 280ms;
}

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

  --bg: #05070D;
  --ink: #EEF2F9;
  --muted: #8D97AC;
  --line: rgb(255 255 255 / 0.08);
  --line-strong: rgb(255 255 255 / 0.22);
  --accent-text: #83A8FF;
  --logo-ink: #EEF2F9;
  --card-solid: #0D1220;
  --seg-active: rgb(255 255 255 / 0.14);
  --success: #3BD68A;
  --danger: #FF7373;

  --a1: #2F6BFF;
  --a2: #22D3EE;
  --a3: #4B3BFF;
  --blob-opacity: 0.42;
  --grain: 0.08;

  --glass-1: rgb(22 28 52 / 0.62);
  --glass-2: rgb(10 14 30 / 0.42);
  --glass-hi: rgb(255 255 255 / 0.2);
  --rim-a: rgb(255 255 255 / 0.5);
  --rim-b: rgb(255 255 255 / 0.05);
  --rim-c: rgb(130 170 255 / 0.45);
  --shadow-1: rgb(0 0 0 / 0.4);
  --shadow-2: rgb(0 0 0 / 0.75);
  --blur: 30px;

  --ra0: #FFFFFF; --ra0o: 0.85;
  --ra1: #FFFFFF; --ra1o: 0.28;
  --ra2: #AFC4FF; --ra2o: 0.14;
  --ra3: #FFFFFF; --ra3o: 0.55;
  --rb0: #BFE9FF; --rb0o: 0.95;
  --rb1: #2F6BFF; --rb1o: 0.95;
  --rb2: #2F6BFF; --rb2o: 0.65;
  --rb3: #22D3EE; --rb3o: 0.85;
}