:root {
  color-scheme: light;

  --paper: #FAFAF7;
  --surface: #FFFFFF;
  --sunk: #F1F0EB;
  --ink: #0B0B0C;
  --muted: #5B6170;
  --faint: #6B7280;
  --line: #E4E2DC;
  --rule: #CDCAC2;
  --blue: #1D4ED8;
  --blue-hover: #1E40AF;
  --blue-bg: #EEF2FF;
  --green: #15803D;
  --green-bg: #ECFDF3;
  --danger: #B91C1C;

  --t-12: 0.75rem;
  --t-14: 0.875rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-20: 1.25rem;
  --t-22: 1.375rem;
  --t-24: 1.5rem;
  --t-28: 1.75rem;
  --t-32: 2rem;
  --t-36: clamp(2rem, 4vw, 2.25rem);
  --t-48: clamp(2.5rem, 6vw, 3rem);
  --t-64: clamp(3rem, 9vw, 4rem);

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  --r-6: 6px;
  --r-12: 12px;
  --r-20: 20px;

  --sh-1: 0 1px 2px rgb(11 11 12 / 0.05);
  --sh-2: 0 8px 24px rgb(11 11 12 / 0.08);
  --sh-3: 0 18px 48px rgb(11 11 12 / 0.12);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --section-y: 96px;
  --frame-highlight: rgb(255 255 255 / 0.6);
}

@media (max-width: 719px) {
  :root { --section-y: 64px; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0F1115;
    --surface: #161920;
    --sunk: #13151B;
    --ink: #ECEBE6;
    --muted: #A3A8B3;
    --faint: #9AA0AC;
    --line: #262A33;
    --rule: #343945;
    --blue: #6D8CFF;
    --blue-hover: #8AA2FF;
    --blue-bg: #1A2140;
    --green: #4ADE80;
    --green-bg: #0F2A1A;
    --sh-1: 0 1px 2px rgb(0 0 0 / 0.2);
    --sh-2: 0 8px 24px rgb(0 0 0 / 0.24);
    --sh-3: 0 18px 48px rgb(0 0 0 / 0.32);
  --frame-highlight: rgb(255 255 255 / 0.08);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0F1115;
  --surface: #161920;
  --sunk: #13151B;
  --ink: #ECEBE6;
  --muted: #A3A8B3;
  --faint: #9AA0AC;
  --line: #262A33;
  --rule: #343945;
  --blue: #6D8CFF;
  --blue-hover: #8AA2FF;
  --blue-bg: #1A2140;
  --green: #4ADE80;
  --green-bg: #0F2A1A;
  --sh-1: 0 1px 2px rgb(0 0 0 / 0.2);
  --sh-2: 0 8px 24px rgb(0 0 0 / 0.24);
  --sh-3: 0 18px 48px rgb(0 0 0 / 0.32);
  --frame-highlight: rgb(255 255 255 / 0.08);
}

[data-theme="light"] {
  color-scheme: light;
  --paper: #FAFAF7;
  --surface: #FFFFFF;
  --sunk: #F1F0EB;
  --ink: #0B0B0C;
  --muted: #5B6170;
  --faint: #6B7280;
  --line: #E4E2DC;
  --rule: #CDCAC2;
  --blue: #1D4ED8;
  --blue-hover: #1E40AF;
  --blue-bg: #EEF2FF;
  --green: #15803D;
  --green-bg: #ECFDF3;
  --danger: #B91C1C;
  --sh-1: 0 1px 2px rgb(11 11 12 / 0.05);
  --sh-2: 0 8px 24px rgb(11 11 12 / 0.08);
  --sh-3: 0 18px 48px rgb(11 11 12 / 0.12);
  --frame-highlight: rgb(255 255 255 / 0.6);
}

[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0F1115;
  --surface: #161920;
  --sunk: #13151B;
  --ink: #ECEBE6;
  --muted: #A3A8B3;
  --faint: #9AA0AC;
  --line: #262A33;
  --rule: #343945;
  --blue: #6D8CFF;
  --blue-hover: #8AA2FF;
  --blue-bg: #1A2140;
  --green: #4ADE80;
  --green-bg: #0F2A1A;
  --sh-1: 0 1px 2px rgb(0 0 0 / 0.2);
  --sh-2: 0 8px 24px rgb(0 0 0 / 0.24);
  --sh-3: 0 18px 48px rgb(0 0 0 / 0.32);
  --frame-highlight: rgb(255 255 255 / 0.08);
}