/* ==========================================================================
   Staylight design tokens
   --------------------------------------------------------------------------
   Shared foundation for staylighthost.com and (later) the guest site.
   Nothing in here targets a specific element; it only defines variables.
   Reuse: copy this file as-is into the other site, then load it before
   that site's own component CSS. See README.md → "Reusing the look".
   ========================================================================== */

:root {
  /* ---- Brand palette ---------------------------------------------------- */
  --sl-navy: #0A2A4A;
  --sl-blue: #1A4F8B;
  --sl-sky: #2F7BD0;
  --sl-mist: #E8F1FB;
  --sl-white: #FFFFFF;
  --sl-cream: #FBF7EE;     /* warm paper, the main light-warm surface */
  --sl-sand: #F1E6D0;      /* deeper warm neutral for the late-day sky */

  /* Accent: a restrained brass, used sparingly (buttons, rules, badges).
     Deepened from the original #FFC845 / #F5A623 sun golds. Gold fills
     always carry navy text; brass is never used as text on white. */
  --sl-sun: #D4A23C;       /* brass: button fills, small badges */
  --sl-sun-deep: #B8862B;  /* hover / pressed */
  --sl-brass-line: #9C7424;/* hairline rules and marks on light surfaces */
  --sl-sun-soft: rgba(212, 162, 60, 0.14);

  /* Supporting neutrals derived from the palette */
  --sl-navy-900: #061426;
  --sl-navy-800: #0B2442;
  --sl-ink-muted-on-light: #33506E; /* AA on white, mist, cream and sand */
  --sl-ink-muted-on-dark: #B9CCE2;  /* AA on navy and blue */
  --sl-line-light: rgba(10, 42, 74, 0.12);
  --sl-line-strong: rgba(10, 42, 74, 0.22);
  --sl-line-dark: rgba(255, 255, 255, 0.16);

  /* ---- Typography ------------------------------------------------------- */
  --sl-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sl-font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale (mobile → desktop) */
  --sl-text-xs: 0.8125rem;
  --sl-text-sm: 0.9375rem;
  --sl-text-base: 1.0625rem;
  --sl-text-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --sl-text-xl: clamp(1.3125rem, 1.2rem + 0.6vw, 1.625rem);
  --sl-text-2xl: clamp(1.625rem, 1.4rem + 1.2vw, 2.25rem);
  --sl-text-3xl: clamp(2rem, 1.6rem + 2.2vw, 3.25rem);
  --sl-text-display: clamp(2.5rem, 1.8rem + 3.6vw, 4.5rem);

  --sl-leading-tight: 1.08;
  --sl-leading-snug: 1.25;
  --sl-leading-body: 1.65;
  --sl-tracking-display: -0.022em;
  --sl-tracking-label: 0.16em;

  /* ---- Spacing ---------------------------------------------------------- */
  --sl-space-1: 0.25rem;
  --sl-space-2: 0.5rem;
  --sl-space-3: 0.75rem;
  --sl-space-4: 1rem;
  --sl-space-5: 1.5rem;
  --sl-space-6: 2rem;
  --sl-space-7: 3rem;
  --sl-space-8: 4rem;
  --sl-space-9: 6rem;
  --sl-section-pad: clamp(5rem, 3.5rem + 7vw, 9rem);
  --sl-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --sl-container: 72rem;
  --sl-measure: 38rem;

  /* ---- Radii: tight and deliberate ------------------------------------- */
  --sl-radius-sm: 3px;
  --sl-radius-md: 4px;
  --sl-radius-lg: 6px;
  --sl-radius-pill: 999px;

  /* ---- Shadows: low and restrained -------------------------------------- */
  --sl-shadow-sm: 0 1px 2px rgba(6, 20, 38, 0.06);
  --sl-shadow-md: 0 1px 2px rgba(6, 20, 38, 0.06), 0 8px 24px -12px rgba(6, 20, 38, 0.18);
  --sl-shadow-lg: 0 1px 3px rgba(6, 20, 38, 0.08), 0 24px 48px -24px rgba(6, 20, 38, 0.28);

  /* ---- Motion: ease-out only, nothing springy --------------------------- */
  --sl-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --sl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sl-dur-fast: 150ms;
  --sl-dur: 280ms;
  --sl-dur-reveal: 800ms;
  --sl-dur-tone: 700ms;

  /* ======================================================================
     Light arc: one "stop" per story beat, from pre-dawn to late light.
     Each stop defines:
       -top / -bottom : sky gradient colors (viewport top → bottom)
       -glow / -glow-a: sun-disc glow color and its opacity (0–1)
       -sun           : vertical disc position, % of viewport (>100 = below horizon)
       -ridge / -ridge-a: far ridgeline color and opacity
       -tone          : "dark" or "light" (which text ink sits on this stop)
     js/main.js reads these at runtime and blends between neighbours as you
     scroll. With reduced motion (or no JS) each section paints its own
     static top→bottom gradient from the same values.
     The warm end stays in cream and sand; the brass glow carries the
     golden-hour payoff instead of full-bleed gold backgrounds.
     A section opts into a stop with data-light="<name>".
     ====================================================================== */
  --arc-predawn-top: #061426;   --arc-predawn-bottom: #0B2442;
  --arc-predawn-glow: #2F7BD0;  --arc-predawn-glow-a: 0.22;
  --arc-predawn-sun: 118;
  --arc-predawn-ridge: #0A2342; --arc-predawn-ridge-a: 0.9;
  --arc-predawn-tone: dark;

  --arc-dawn-top: #0B2442;      --arc-dawn-bottom: #163E6C;
  --arc-dawn-glow: #D4A23C;     --arc-dawn-glow-a: 0.2;
  --arc-dawn-sun: 104;
  --arc-dawn-ridge: #0A2A4A;    --arc-dawn-ridge-a: 0.85;
  --arc-dawn-tone: dark;

  --arc-morning-top: #DCE8F5;   --arc-morning-bottom: #EEF4FA;
  --arc-morning-glow: #FFFFFF;  --arc-morning-glow-a: 0.6;
  --arc-morning-sun: 30;
  --arc-morning-ridge: #C5D6EA; --arc-morning-ridge-a: 0.4;
  --arc-morning-tone: light;

  --arc-day-top: #EEF4FA;       --arc-day-bottom: #FAFCFE;
  --arc-day-glow: #FFFFFF;      --arc-day-glow-a: 0.7;
  --arc-day-sun: 18;
  --arc-day-ridge: #D2DFEE;     --arc-day-ridge-a: 0.35;
  --arc-day-tone: light;

  --arc-noon-top: #FAFCFE;      --arc-noon-bottom: #FBF8F1;
  --arc-noon-glow: #F1DDB0;     --arc-noon-glow-a: 0.3;
  --arc-noon-sun: 20;
  --arc-noon-ridge: #D2DFEE;    --arc-noon-ridge-a: 0.3;
  --arc-noon-tone: light;

  --arc-afternoon-top: #FBF8F1;   --arc-afternoon-bottom: #F7F0E1;
  --arc-afternoon-glow: #E3B866;  --arc-afternoon-glow-a: 0.28;
  --arc-afternoon-sun: 38;
  --arc-afternoon-ridge: #CFD9E6; --arc-afternoon-ridge-a: 0.3;
  --arc-afternoon-tone: light;

  --arc-golden-top: #F7F0E1;    --arc-golden-bottom: #F1E4C9;
  --arc-golden-glow: #D4A23C;   --arc-golden-glow-a: 0.38;
  --arc-golden-sun: 62;
  --arc-golden-ridge: #BCC9DA;  --arc-golden-ridge-a: 0.3;
  --arc-golden-tone: light;

  --arc-lowsun-top: #F1E4C9;    --arc-lowsun-bottom: #F4EBD8;
  --arc-lowsun-glow: #C9922E;   --arc-lowsun-glow-a: 0.32;
  --arc-lowsun-sun: 70;
  --arc-lowsun-ridge: #BCC9DA;  --arc-lowsun-ridge-a: 0.28;
  --arc-lowsun-tone: light;

  --arc-evening-top: #F4EBD8;   --arc-evening-bottom: #F8F2E6;
  --arc-evening-glow: #D4A23C;  --arc-evening-glow-a: 0.26;
  --arc-evening-sun: 76;
  --arc-evening-ridge: #C3CFDE; --arc-evening-ridge-a: 0.28;
  --arc-evening-tone: light;

  --arc-sunset-top: #F8F2E6;    --arc-sunset-bottom: #EEDDBB;
  --arc-sunset-glow: #C9922E;   --arc-sunset-glow-a: 0.48;
  --arc-sunset-sun: 86;
  --arc-sunset-ridge: #9FB2CB;  --arc-sunset-ridge-a: 0.3;
  --arc-sunset-tone: light;
}