/* KeLoKe Corner — generated from tokens.json */
:root, [data-theme="light"] {
  --surface: #F6EBD3;
  --surface-raised: #FFF9EE;
  --ink: #3B0D12;
  --ink-muted: #6B4A4D;
  --heading: #002D62;
  --link: #CE1126;
  --focus: #1F4FA3;
  --line: #3B0D12;
  --block-blue: var(--bandera);
  --bandera: #002D62;
  --bandera-600: #1F4FA3;
  --rojo: #CE1126;
  --rojo-700: #A60E1F;
  --oro: #D9B45B;
  --medianoche: #0B1424;
  --sol: #FFC93C;
  --flamboyan: #C9430F;
  --larimar: #4FC1D0;
  --palma: #1E7A52;
  --hibisco: #E8457A;
  --caoba: #3B0D12;
  --arena: #F6EBD3;
  --cal: #FFF9EE;
  --on-bandera: #FFF9EE;
  --on-rojo: #FFF9EE;
  --on-sol: #3B0D12;
  --on-larimar: #0B1424;
  --on-flamboyan: #FFF9EE;
  --on-palma: #FFF9EE;
  --shadow-hard: 6px 6px 0 #3B0D12;
  --shadow-hard-sm: 3px 3px 0 #3B0D12;
  --shadow-paper: 0 2px 0 rgba(59,13,18,0.15), 0 14px 30px -12px rgba(59,13,18,0.35);
}
[data-theme="dark"] {
  --surface: #0B1424;
  --surface-raised: #131F38;
  --ink: #F6EBD3;
  --ink-muted: #A9B3C7;
  --heading: #FFC93C;
  --link: #FF8E9B;
  --focus: #FFC93C;
  --line: #2A3858;
  --block-blue: var(--bandera-600);
  --bandera: #002D62;
  --bandera-600: #1F4FA3;
  --rojo: #CE1126;
  --rojo-700: #A60E1F;
  --oro: #D9B45B;
  --medianoche: #0B1424;
  --sol: #FFC93C;
  --flamboyan: #C9430F;
  --larimar: #4FC1D0;
  --palma: #1E7A52;
  --hibisco: #E8457A;
  --caoba: #3B0D12;
  --arena: #F6EBD3;
  --cal: #FFF9EE;
  --on-bandera: #FFF9EE;
  --on-rojo: #FFF9EE;
  --on-sol: #3B0D12;
  --on-larimar: #0B1424;
  --on-flamboyan: #FFF9EE;
  --on-palma: #FFF9EE;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-pill: 999px;
  --font-display: "Archivo", "Arial Narrow", Impact, sans-serif;
  --font-serif: "Fraunces", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
}
.display-xl { font-family: var(--font-display); font-size: 96px; line-height: 0.88; font-weight: 900; }
.display-l { font-family: var(--font-display); font-size: 64px; line-height: 0.9; font-weight: 900; }
.display-m { font-family: var(--font-display); font-size: 40px; line-height: 0.95; font-weight: 900; }
.accent { font-family: var(--font-display); font-size: 28px; line-height: 1; font-weight: 500; font-style: italic; }
.serif-h { font-family: var(--font-serif); font-size: 32px; line-height: 1.15; font-weight: 500; }
.lead { font-family: var(--font-body); font-size: 19px; line-height: 1.55; font-weight: 400; }
.body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; font-weight: 400; }
.small { font-family: var(--font-body); font-size: 14px; line-height: 1.5; font-weight: 400; }
.eyebrow { font-family: var(--font-body); font-size: 12px; line-height: 1; font-weight: 700; letter-spacing: 0.22em; }