/* Alpha design tokens. Direction: "Daylight".
   One idea runs through the system: every colour has a day value and a night value,
   and a single number, --n (0 = day, 1 = night), mixes between them. */

@font-face{font-family:"Readex Pro";src:url("../fonts/readex-pro-latin.woff2") format("woff2");font-weight:160 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Readex Pro";src:url("../fonts/readex-pro-latin-ext.woff2") format("woff2");font-weight:160 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Readex Pro";src:url("../fonts/readex-pro-arabic.woff2") format("woff2");font-weight:160 700;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"DM Mono";src:url("../fonts/dm-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url("../fonts/dm-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

@property --n{syntax:"<number>";inherits:true;initial-value:0}
@property --h{syntax:"<number>";inherits:true;initial-value:0}

:root{
  /* day */
  --plaster:#ECE9E4;      /* page */
  --stone:#DDD9D3;        /* raised panels */
  --graphite:#1A1C1F;     /* text */
  --slate:#555A62;        /* secondary text, 5.9:1 on plaster */
  /* night */
  --dusk:#0D172C;         /* page */
  --dusk-panel:#16223B;   /* raised panels */
  --moon:#F4F1EB;         /* text */
  --haze:#A8B3C7;         /* secondary text, 8.5:1 on dusk */
  /* constant */
  --red:#D4241C;          /* Alpha red: brand mark and the one main action */
  --red-deep:#B81C15;
  --lamp:#FFD7A0;         /* 3000K glow */

  --sans:"Readex Pro",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --mono:"DM Mono","Readex Pro",ui-monospace,monospace;

  /* type scale */
  --fs-display:clamp(2.6rem,6.6vw,6.25rem);
  --fs-title:clamp(1.9rem,3.7vw,3.3rem);
  --fs-sub:clamp(1.3rem,2vw,1.75rem);
  --fs-lede:clamp(1rem,1.25vw,1.15rem);
  --fs-body:1rem;
  --fs-small:.9375rem;
  --fs-label:.6875rem;

  /* space: 4px base */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --gut:clamp(20px,4vw,56px);
  --section:clamp(72px,9vw,136px);

  --radius:6px;
  --pill:999px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-dusk:cubic-bezier(.45,0,.2,1);

  /* layers */
  --z-top:40; --z-menu:50; --z-skip:100;

  --n:0;
}

html{transition:--n 1.5s var(--ease-dusk)}
html.instant,html.instant *,html.instant *::before,html.instant *::after{transition:none!important;animation:none!important}

/* Put .theme on any element that needs its own day/night mix (the body, or a card with its own switch). */
.theme{
  --m:var(--n);
  --pct:calc(var(--m)*100%);
  /* text flips between .42 and .545 so it never sits grey-on-grey mid-fade */
  --flip:calc(clamp(0,(var(--m) - .42)*8,1)*100%);
  --bg:color-mix(in oklab,var(--plaster),var(--dusk) var(--pct));
  --panel:color-mix(in oklab,var(--stone),var(--dusk-panel) var(--pct));
  --fg:color-mix(in oklab,var(--graphite),var(--moon) var(--flip));
  --soft:color-mix(in oklab,var(--slate),var(--haze) var(--flip));
  --rule:color-mix(in oklab,rgba(26,28,31,.17),rgba(214,224,245,.22) var(--flip));
  --ink-day:color-mix(in oklab,var(--graphite),#8C97AD var(--flip));
  --ink-night:color-mix(in oklab,#8F9299,var(--lamp) var(--flip));
  --glass:color-mix(in oklab,rgba(246,244,240,.9),rgba(13,23,44,.78) var(--pct));
}