/* Atween — generated stylesheet. Comments (the reasoning, the ruling references) live in the source tree, not in the shipped bytes. */
:root{

  --brand-cyan-hi:   #C6F9F2;
  --brand-cyan:      #40CFCE;
  --brand-cyan-deep: #1C9DBA;
  --brand-warm-hi:   #FFD79B;
  --brand-warm:      #F0793F;
  --brand-warm-deep: #DB2C14;
  --brand-core:      #EFE9E4;

  --field-1: #1D3349;
  --field-2: #112134;
  --field-3: #0A131F;
  --field-4: #070B12;

  --motion-fast: 140ms;
  --motion-ui: 220ms;
  --motion-sheet: 300ms;
  --ease-out: cubic-bezier(.23,1,.32,1);
  --ease-in-out: cubic-bezier(.77,0,.175,1);
  --ease-drawer: cubic-bezier(.32,.72,0,1);
}

:root{
  --bg:   var(--field-4);
  --sf:   var(--field-3);
  --sf2:  var(--field-2);
  --well: var(--field-2);

  --ink:  var(--brand-core);
  --ink2: color-mix(in srgb, var(--brand-core) 72%, transparent);
  --ink3: color-mix(in srgb, var(--brand-core) 46%, transparent);
  --line: color-mix(in srgb, var(--brand-core) 13%, transparent);

  --surface: var(--field-4);
  --surface-dim: var(--field-4);
  --surface-bright: var(--field-1);
  --surface-container-low: var(--field-3);
  --surface-container: var(--field-3);
  --surface-container-high: var(--field-2);
  --outline: color-mix(in srgb, var(--brand-core) 13%, transparent);
  --outline-variant: color-mix(in srgb, var(--brand-core) 8%, transparent);
  --focus-ring: color-mix(in srgb, var(--brand-cyan) 42%, transparent);
  --scrim: color-mix(in srgb, var(--field-4) 78%, transparent);

  --ac:    var(--brand-cyan);
  --warm:  var(--brand-warm-hi);
  --danger:var(--brand-warm-deep);
  --ac-text:     var(--brand-cyan);
  --warm-text:   var(--brand-warm-hi);

  --danger-text: color-mix(in srgb, var(--brand-warm-deep) 46%, var(--brand-core));
  --primary-container: color-mix(in srgb, var(--brand-cyan) 16%, var(--field-2));
  --on-primary-container: var(--brand-cyan-hi);
  --secondary-container: color-mix(in srgb, var(--brand-warm-hi) 14%, var(--field-2));
  --on-secondary-container: var(--brand-warm-hi);
  --on-primary: var(--field-4);

  --glow: color-mix(in srgb, var(--brand-cyan) 6%, transparent);
  --shadow:    0 1px 2px rgba(0,0,0,.5), 0 8px 22px -16px rgba(0,0,0,.7);
  --shadow-lg: 0 2px 5px rgba(0,0,0,.5), 0 20px 52px -28px rgba(0,0,0,.75);
}

[data-field="warm"]{ --field-tint: radial-gradient(130% 60% at 50% 0%,   rgba(255,150,90,.05),  transparent 62%); }
[data-field="wistful"]{ --field-tint: radial-gradient(130% 72% at 50% 100%, rgba(95,120,175,.07),  transparent 64%); }
[data-field="heavy"]{ --field-tint: rgba(36,38,58,.10); }
:root [data-field="warm"], :root [data-field="wistful"], :root [data-field="heavy"]{ --field-tint:none; }
[data-field="deep"]{
  --bg:#0C0A16; --ink:#D2D5E2; --ink2:#9AA0B4; --ink3:#6B7186;
  --line:rgba(210,215,235,.12); --well:rgba(255,255,255,.04); --glow:rgba(120,110,200,.10);
  --field-tint:none;
}
[data-field="crisis"]{
  --bg:#161B26; --ink:#DCDEE2; --ink2:#AEB2BC; --ink3:#888D99;
  --ac:#8A8FA0; --warm:#6B7280; --danger:#9B4A3A;
  --ac-text:#8A8FA0; --warm-text:#6B7280; --danger-text:#9B4A3A;
  --line:rgba(220,222,226,.12); --well:rgba(255,255,255,.04); --glow:rgba(160,165,175,.08);
  --field-tint:none;

  --sf:rgba(255,255,255,.03); --sf2:#1C222E;
}

:root{
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'Source Sans 3', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --lat:   'Jost', var(--sans);

  --mono:  ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
}

:root{

  --t-label:   11.5px;
  --t-small:   14.4px;
  --t-body:    18px;
  --t-lead:    22.5px;
  --t-h3:      28px;
  --t-h2:      35px;
  --t-h1:      44px;
  --t-display: 55px;

  --lh-body:    1.62;
  --lh-lead:    1.5;
  --lh-heading: 1.18;
  --lh-small:   1.7;

  --lambda: 4px;
  --s-1: calc(var(--lambda) *  1);
  --s-2: calc(var(--lambda) *  2);
  --s-3: calc(var(--lambda) *  3);
  --s-4: calc(var(--lambda) *  4);
  --s-5: calc(var(--lambda) *  6);
  --s-6: calc(var(--lambda) * 10);
  --s-7: calc(var(--lambda) * 16);
  --s-8: calc(var(--lambda) * 26);

  --measure: 62ch;
  --measure-legal: 68ch;
  --w-page: 820px;
  --w-wide: 1100px;
}

@media (prefers-color-scheme: dark){
:root{
  --bg:   var(--field-4);
  --sf:   var(--field-3);
  --sf2:  var(--field-2);
  --well: var(--field-2);

  --ink:  var(--brand-core);
  --ink2: color-mix(in srgb, var(--brand-core) 72%, transparent);
  --ink3: color-mix(in srgb, var(--brand-core) 46%, transparent);
  --line: color-mix(in srgb, var(--brand-core) 13%, transparent);
  --surface: var(--field-4);
  --surface-container: var(--field-3);
  --surface-container-high: var(--field-2);
  --outline: color-mix(in srgb, var(--brand-core) 13%, transparent);
  --focus-ring: color-mix(in srgb, var(--brand-cyan) 42%, transparent);

  --ac:    var(--brand-cyan);
  --warm:  var(--brand-warm-hi);
  --danger:var(--brand-warm-deep);
  --ac-text:     var(--ac);
  --warm-text:   var(--warm);
  --danger-text: color-mix(in srgb, var(--brand-warm-deep) 46%, var(--brand-core));

  --glow: color-mix(in srgb, var(--brand-cyan) 6%, transparent);
  --shadow:    0 30px 70px -34px rgba(0,0,0,.7), 0 4px 14px -6px rgba(0,0,0,.5);
  --shadow-lg: 0 60px 120px -50px rgba(0,0,0,.8), 0 12px 30px -14px rgba(0,0,0,.6);
}
}