/* Rooftop Solar Workshop design tokens. Direction: Golden Hour, as a sunrise (record 5dhi/R2).
   Lumen is the light source. Every colour in the app comes from this file: the sky before
   sunrise, and the warm light Lumen gives off. Nothing else in the app writes a colour. */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-var.9a1814381455.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito-latin-var.166202cc391c.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito-latin-italic-var.e0eb96848e7e.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Lumen's light, from core to edge. Lumen's gradient uses these stops. */
  --lumen-core: #fffef6;
  --lumen-cream: #fff0b0;
  --lumen-gold: #ffc857;
  --lumen-amber: #ff9a3c;
  --lumen-eye: #5a3410;

  /* Electrons in the solar panel drawings: blue, so they never look like the yellow photons. */
  --electron: #4f9dff;
  --electron-edge: #1b3f8f;
  --lumen-glow: rgba(255, 200, 100, 0.8);
  --lumen-halo: rgba(255, 210, 122, 0.55);

  /* The sky before sunrise, from the top of the screen down to the horizon. */
  --sky-night: #1b2250;
  --sky-indigo: #2f2d6b;
  --sky-violet: #5b4486;
  --sky-rose: #c8718a;
  --sky-peach: #f5a47e;
  --sky-gold: #ffd08a;
  --ridge-far: #6b4273;
  --ridge-near: #36214c;

  /* Surfaces lit by Lumen, and the ink on them. */
  --lit: #fff7ec;
  --lit-strong: #ffffff;
  --lit-warm: #ffe9cc;
  --lit-edge: #f1dfca;
  --ink: #2a1d33;
  --ink-muted: #6b566b;
  --on-sky: #fff7ec;
  --on-sky-muted: rgba(255, 247, 236, 0.74);
  --glass: rgba(255, 247, 236, 0.92);
  --glass-dark: rgba(35, 24, 60, 0.55);
  --glass-line: rgba(255, 217, 138, 0.35);
  --veil: rgba(255, 247, 236, 0.12);

  /* Accents. Plum is the team's voice; amber is Lumen's; rose marks what changes. */
  --team: #3d2a57;
  --team-ink: #fff7ec;
  --accent: #ffb54d;
  --accent-ink: #2a1d33;
  --rose: #e27d6a;
  --success: #3f7d4e;
  --warn: #b4561f;
  --error: #b3261e;

  /* Type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --display-soft: "SOFT" 100, "WONK" 1;
  /* Six type steps. Nothing outside this file sets a pixel font size. */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 26px;
  --text-display: clamp(32px, 4vw, 48px);
  --text-hero: clamp(30px, 7vw, 44px);
  --text-code: 38px;

  /* Space, in steps of a small grid. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Page frame */
  --page-max: 1320px;
  --bar-h: 60px;

  /* Shape and depth. Shadows are warm: light comes from Lumen, not from above. */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --radius-tail: 6px;
  --shadow-card: 0 10px 34px rgba(35, 20, 60, 0.28);
  --shadow-glow: 0 0 0 2px var(--accent), 0 12px 40px rgba(255, 170, 60, 0.35);
  --shadow-button: 0 0 18px rgba(255, 181, 77, 0.75);

  /* Lumen's sizes. Lumen is never smaller than a thumb. */
  --lumen-mark: 60px;
  --lumen-chat: 64px;
  --lumen-hero: min(300px, 74vw);
  --lumen-stage: min(400px, 82vw);
  --lumen-rail: 220px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-quick: 160ms;
  --dur-calm: 420ms;

  /* How far the sun has risen: 0 is first light, 1 is full morning. Each session raises it. */
  --sunrise: 0.1;
}

body[data-session="1"] { --sunrise: 0.18; }
body[data-session="2"] { --sunrise: 0.34; }
body[data-session="3"] { --sunrise: 0.5; }
body[data-session="4"] { --sunrise: 0.66; }
body[data-session="5"] { --sunrise: 0.82; }
body[data-session="6"] { --sunrise: 1; }