/* Azulejo design tokens — generated from tokens.json. Themes: light, dark (default: light).
   Switch theme with <html data-theme="dark">. */
:root, [data-theme="light"] {
  --page: #f5f1e8;
  --glaze: #fffdf7;
  --glaze-sunk: #ebe5d8;
  --grout: #d6cdbb;
  --ink: #13234b;
  --ink-soft: #4d5873;
  --cobalt: #1e45a8;
  --cobalt-deep: #122c70;
  --cobalt-tint: #dfe7f7;
  --cobalt-ink: #1e45a8;
  --on-cobalt: #ffffff;
  --terracotta: #b0502a;
  --sunflower: #f0b429;
  --sea: #1f7a69;
  --on-pigment: #ffffff;
  --on-sunflower: #2a1d05;
  --sheen: rgba(255, 255, 255, 0.72);
  --focus: #b0502a;
  --shadow-tile: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 0 #d6cdbb, 0 6px 14px -8px rgba(19, 35, 75, 0.28);
  --shadow-lift: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 0 #d6cdbb, 0 16px 28px -14px rgba(19, 35, 75, 0.38);
  --shadow-edge: 0 3px 0 #122c70;
  --shadow-well: inset 0 2px 3px rgba(19, 35, 75, 0.14);
  --shadow-float: 0 30px 60px -20px rgba(19, 35, 75, 0.45), 0 2px 0 #d6cdbb;
  color-scheme: light;
}
[data-theme="dark"] {
  --page: #0c1626;
  --glaze: #15233b;
  --glaze-sunk: #0a1220;
  --grout: #24385a;
  --ink: #ecf0f7;
  --ink-soft: #a3b0c6;
  --cobalt: #3a64cf;
  --cobalt-deep: #1a3683;
  --cobalt-tint: #1c3060;
  --cobalt-ink: #8fb0f6;
  --on-cobalt: #ffffff;
  --terracotta: #e2875a;
  --sunflower: #f2bd3d;
  --sea: #4cb8a2;
  --on-pigment: #0a1220;
  --on-sunflower: #2a1d05;
  --sheen: rgba(196, 216, 255, 0.24);
  --focus: #f2bd3d;
  --shadow-tile: inset 0 1px 0 rgba(196, 216, 255, 0.12), 0 1px 0 #070d18, 0 8px 18px -8px rgba(0, 0, 0, 0.6);
  --shadow-lift: inset 0 1px 0 rgba(196, 216, 255, 0.14), 0 1px 0 #070d18, 0 18px 30px -12px rgba(0, 0, 0, 0.7);
  --shadow-edge: 0 3px 0 #0f2259;
  --shadow-well: inset 0 2px 4px rgba(0, 0, 0, 0.5);
  --shadow-float: 0 30px 60px -16px rgba(0, 0, 0, 0.8), 0 2px 0 #070d18;
  color-scheme: dark;
}
:root {
  --space-grout: 3px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-chip: 3px;
  --radius-tile: 6px;
  --radius-panel: 12px;
  --radius-full: 9999px;
  --font-display: "DM Serif Display", "Iowan Old Style", Georgia, serif;
  --font-body: "Work Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --type-display-family: var(--font-display);
  --type-display-size: 64px;
  --type-display-line: 66px;
  --type-display-weight: 400;
  --type-display-tracking: -0.01em;
  --type-title-family: var(--font-display);
  --type-title-size: 40px;
  --type-title-line: 44px;
  --type-title-weight: 400;
  --type-heading-family: var(--font-display);
  --type-heading-size: 24px;
  --type-heading-line: 30px;
  --type-heading-weight: 400;
  --type-numeral-family: var(--font-display);
  --type-numeral-size: 36px;
  --type-numeral-line: 40px;
  --type-numeral-weight: 400;
  --type-lead-family: var(--font-body);
  --type-lead-size: 18px;
  --type-lead-line: 28px;
  --type-lead-weight: 400;
  --type-body-family: var(--font-body);
  --type-body-size: 15px;
  --type-body-line: 24px;
  --type-body-weight: 400;
  --type-label-family: var(--font-body);
  --type-label-size: 12px;
  --type-label-line: 16px;
  --type-label-weight: 600;
  --type-label-tracking: 0.12em;
  --type-small-family: var(--font-body);
  --type-small-size: 13px;
  --type-small-line: 18px;
  --type-small-weight: 400;
}
/* Type styles as utility classes (optional) */
.type-display { font-family: var(--type-display-family); font-size: var(--type-display-size); line-height: var(--type-display-line); font-weight: var(--type-display-weight); letter-spacing: var(--type-display-tracking); }
.type-title { font-family: var(--type-title-family); font-size: var(--type-title-size); line-height: var(--type-title-line); font-weight: var(--type-title-weight); }
.type-heading { font-family: var(--type-heading-family); font-size: var(--type-heading-size); line-height: var(--type-heading-line); font-weight: var(--type-heading-weight); }
.type-numeral { font-family: var(--type-numeral-family); font-size: var(--type-numeral-size); line-height: var(--type-numeral-line); font-weight: var(--type-numeral-weight); }
.type-lead { font-family: var(--type-lead-family); font-size: var(--type-lead-size); line-height: var(--type-lead-line); font-weight: var(--type-lead-weight); }
.type-body { font-family: var(--type-body-family); font-size: var(--type-body-size); line-height: var(--type-body-line); font-weight: var(--type-body-weight); }
.type-label { font-family: var(--type-label-family); font-size: var(--type-label-size); line-height: var(--type-label-line); font-weight: var(--type-label-weight); letter-spacing: var(--type-label-tracking); }
.type-small { font-family: var(--type-small-family); font-size: var(--type-small-size); line-height: var(--type-small-line); font-weight: var(--type-small-weight); }