/* Keith de Alwis design tokens v1.1.0. Generated from tokens.json. Night ("dark") is the default; set data-theme="light" for Paper. */

:root, [data-theme="dark"] {
  --bg: #080e10;
  --surface: #0b1314;
  --surface-glass: #101d20e8;
  --field: #050c0f;
  --media: #0b1314;
  --ink: #edf5f3;
  --ink-strong: #dfede8;
  --text: #aebfbe;
  --text-muted: #9dacac;
  --text-subtle: #839d9a;
  --line: #ffffff26;
  --line-strong: #69807e;
  --accent: #4bffa5;
  --accent-soft: #72dea9;
  --accent-phrase: #9adbb9;
  --accent-tag: #8fbea5;
  --accent-line: #4bffa566;
  --accent-tint: #4bffa514;
  --on-accent: #0c211a;
  --focus: #4bffa5;
  --logo-mint: #5ef9c9;
  --logo-cyan: #00f0fe;
  --logo-green: #05f58a;
  --logo-blue: #1774fe;
  --logo-cobalt: #0065f0;
  --logo-lime: #e6fdcb;
  --panel-start: #72f3d4;
  --panel-end: #1f5df8;
  --danger: #ff9a7a;
  --shadow-card: 0 10px 35px #00000022;
  --shadow-card-active: 0 16px 40px #00000055, 0 0 24px #4bffa508;
  --shadow-glass: 0 32px 90px #00000066, 0 8px 24px #00000033, inset 0 1px 0 #ffffff42, inset 0 -1px 0 #00000099;
  --shadow-field: inset 0 2px 5px #00000055, 0 1px 0 #ffffff16;
  --shadow-button: inset 0 1px #eafff299, inset 0 -1px #143a2555, 0 4px 12px #00000033;
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #f4f7f6;
  --surface: #ffffff;
  --surface-glass: #ffffffeb;
  --field: #ffffff;
  --ink: #080e10;
  --ink-strong: #101a1c;
  --text: #34403f;
  --text-muted: #4a5857;
  --text-subtle: #566463;
  --line: #080e1024;
  --line-strong: #7d8c8a;
  --accent: #047a47;
  --accent-soft: #0b6e45;
  --accent-phrase: #0a6a42;
  --accent-tag: #2f6b50;
  --accent-line: #047a4766;
  --accent-tint: #047a470d;
  --on-accent: #ffffff;
  --focus: #047a47;
  --danger: #b3401c;
  color-scheme: light;
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 14px;
  --space-4: 20px;
  --space-5: 28px;
  --space-6: 38px;
  --space-7: 44px;
  --space-8: 60px;
  --space-9: 80px;
  --space-10: 145px;
  --gutter: 7%;
  --radius-0: 0;
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-round: 50%;
  --measure-hero: 740px;
  --measure-chapter: 490px;
  --measure-text: 440px;
  --measure-dialog: 580px;
  --breakpoint-mobile: 800px;
  --breakpoint-wide: 1500px;
  --slide-width: 1280px;
  --slide-height: 720px;
  --slide-gutter: 40px;
  --slide-label-col: 192px;
  --font-display: Manrope, "DM Sans", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
}

.display-closing { font-family: var(--font-display); font-size: 110px; line-height: 1.08; font-weight: 300; letter-spacing: -0.06em; }
.display-xl { font-family: var(--font-display); font-size: 100px; line-height: 1.08; font-weight: 300; letter-spacing: -0.06em; }
.display-l { font-family: var(--font-display); font-size: 78px; line-height: 1.08; font-weight: 300; letter-spacing: -0.06em; }
.display-m { font-family: var(--font-display); font-size: 62px; line-height: 1.15; font-weight: 300; letter-spacing: -0.06em; }
.heading { font-family: var(--font-display); font-size: 48px; line-height: 1.15; font-weight: 300; letter-spacing: -0.055em; }
.brand { font-family: var(--font-display); font-size: 25px; line-height: 1.2; font-weight: 500; letter-spacing: -1px; }
.title-l { font-family: var(--font-display); font-size: 32px; line-height: 1.2; font-weight: 300; letter-spacing: -0.04em; }
.title-m { font-family: var(--font-display); font-size: 24px; line-height: 1.3; font-weight: 300; letter-spacing: -0.03em; }
.title-card { font-family: var(--font-display); font-size: 22px; line-height: 1.26; font-weight: 400; letter-spacing: -0.035em; }
.title { font-family: var(--font-display); font-size: 18px; line-height: 1.4; font-weight: 400; letter-spacing: -0.025em; }
.body-l { font-family: var(--font-body); font-size: 18px; line-height: 1.8; font-weight: 300; }
.lead { font-family: var(--font-body); font-size: 17px; line-height: 1.8; font-weight: 300; }
.body { font-family: var(--font-body); font-size: 16px; line-height: 1.8; font-weight: 300; }
.body-s { font-family: var(--font-body); font-size: 14px; line-height: 1.8; font-weight: 300; }
.list-strong { font-family: var(--font-body); font-size: 15px; line-height: 1.45; font-weight: 500; letter-spacing: -0.01em; }
.link { font-family: var(--font-body); font-size: 14px; line-height: 1.4; font-weight: 400; }
.link-big { font-family: var(--font-body); font-size: 30px; line-height: 1.3; font-weight: 300; }
.eyebrow { font-family: var(--font-body); font-size: 12px; line-height: 1.7; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; }
.caption { font-family: var(--font-body); font-size: 12px; line-height: 1.6; font-weight: 400; letter-spacing: 0.04em; }
.micro { font-family: var(--font-body); font-size: 10px; line-height: 1.6; font-weight: 400; letter-spacing: 0.19em; text-transform: uppercase; }
.slide-display { font-family: var(--font-display); font-size: 64px; line-height: 1.12; font-weight: 300; letter-spacing: -0.06em; }
.slide-title { font-family: var(--font-display); font-size: 36px; line-height: 1.1; font-weight: 300; letter-spacing: -0.04em; }
.slide-lead { font-family: var(--font-body); font-size: 16px; line-height: 1.5; font-weight: 300; }
.slide-node-l { font-family: var(--font-display); font-size: 16px; line-height: 1.25; font-weight: 400; letter-spacing: -0.02em; }
.slide-node { font-family: var(--font-display); font-size: 14px; line-height: 1.3; font-weight: 400; letter-spacing: -0.01em; }
.slide-sub { font-family: var(--font-body); font-size: 12px; line-height: 1.35; font-weight: 300; }
.slide-label { font-family: var(--font-body); font-size: 10px; line-height: 1.4; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; }