/* ppl’d design system: generated from tokens.json */

:root, [data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-subtle: #f4f5f7;
  --bg-muted: #e8eaee;
  --sheet: #ffffff;
  --line: #e2e4e9;
  --line-control: #868b96;
  --ink: #0e0f12;
  --ink-2: #454953;
  --ink-3: #686d78;
  --ink-disabled: #b2b6be;
  --on-ink: #ffffff;
  --meet: #a9d4ff;
  --on-meet: #0e0f12;
  --meet-soft: #e8f3ff;
  --scrim: rgba(14, 15, 18, 0.48);
  --focus: var(--ink);
  --shadow-lift: 0 1px 2px rgba(31, 64, 112, 0.08), 0 20px 36px -20px rgba(64, 128, 214, 0.55);
  --shadow-float: 0 1px 2px rgba(31, 64, 112, 0.10), 0 12px 28px -8px rgba(31, 64, 112, 0.24);
  --shadow-sheet: 0 -1px 2px rgba(31, 64, 112, 0.06), 0 -16px 40px -16px rgba(31, 64, 112, 0.28);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0c0e;
  --bg-subtle: #15171a;
  --bg-muted: #22252a;
  --sheet: #1a1c20;
  --line: #2a2d33;
  --line-control: #6b707a;
  --ink: #f3f4f6;
  --ink-2: #b8bcc4;
  --ink-3: #8a8f99;
  --ink-disabled: #4c5058;
  --on-ink: #0e0f12;
  --meet: #a9d4ff;
  --on-meet: #0e0f12;
  --meet-soft: #10223a;
  --scrim: rgba(0, 0, 0, 0.64);
  --focus: var(--ink);
  --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.5), 0 20px 36px -20px rgba(169, 212, 255, 0.35);
  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.6), 0 12px 28px -8px rgba(0, 0, 0, 0.7);
  --shadow-sheet: 0 -1px 2px rgba(0, 0, 0, 0.5), 0 -16px 40px -16px rgba(0, 0, 0, 0.7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b0c0e;
    --bg-subtle: #15171a;
    --bg-muted: #22252a;
    --sheet: #1a1c20;
    --line: #2a2d33;
    --line-control: #6b707a;
    --ink: #f3f4f6;
    --ink-2: #b8bcc4;
    --ink-3: #8a8f99;
    --ink-disabled: #4c5058;
    --on-ink: #0e0f12;
    --meet: #a9d4ff;
    --on-meet: #0e0f12;
    --meet-soft: #10223a;
    --scrim: rgba(0, 0, 0, 0.64);
    --focus: var(--ink);
    --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.5), 0 20px 36px -20px rgba(169, 212, 255, 0.35);
    --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.6), 0 12px 28px -8px rgba(0, 0, 0, 0.7);
    --shadow-sheet: 0 -1px 2px rgba(0, 0, 0, 0.5), 0 -16px 40px -16px rgba(0, 0, 0, 0.7);
  }
}

:root {
  --font-sans: Jost, system-ui, -apple-system, "Segoe UI", sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 28px;
  --radius-tail: 8px;
  --radius-full: 999px;
  --avatar-xs: 24px;
  --avatar-s: 32px;
  --avatar-m: 44px;
  --avatar-l: 64px;
  --avatar-xl: 96px;
  --control-h: 48px;
  --control-h-s: 36px;
  --tap-min: 44px;
  --icon: 24px;
  --bar-h: 56px;
}

.display-xl { font-family: var(--font-sans); font-size: 44px; line-height: 48px; font-weight: 600; letter-spacing: -0.02em; }
.display-l { font-family: var(--font-sans); font-size: 32px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; }
.display-m { font-family: var(--font-sans); font-size: 24px; line-height: 30px; font-weight: 500; letter-spacing: -0.01em; }
.place { font-family: var(--font-sans); font-size: 19px; line-height: 26px; font-weight: 400; font-style: italic; }
.title { font-family: var(--font-sans); font-size: 17px; line-height: 22px; font-weight: 600; }
.headline { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; }
.body { font-family: var(--font-sans); font-size: 15px; line-height: 21px; font-weight: 400; }
.body-s { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 14px; line-height: 18px; font-weight: 500; }
.micro { font-family: var(--font-sans); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.02em; }
.count { font-family: var(--font-sans); font-size: 28px; line-height: 32px; font-weight: 500; letter-spacing: -0.01em; }
.wordmark { font-family: var(--font-sans); font-size: 26px; line-height: 30px; font-weight: 600; letter-spacing: -0.03em; }

:root { --focus-width: 2px; --error-border: 2px; --control-border: 1px; }