/* tokens.css — single source of design truth for Sell Chicago Properties.
 * Generated from _design_research/DESIGN_SYSTEM.md (locked 2026-05-28).
 * Import FIRST in every page's CSS chain. Reference tokens — never raw hex.
 */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Archivo+Expanded:wght@700;800;900&display=swap");

:root {
  /* Color */
  --ink:        #0B1420;
  --ink-2:      #111D31;
  --bone:       #F2EDE3;
  --bone-dim:   rgba(242, 237, 227, 0.72);
  --red:        #D4112E;
  --red-deep:   #B00C24;
  --amber:      #EC9A29;
  --amber-deep: #C57B16;
  --line:       rgba(242, 237, 227, 0.14);
  --line-ink:   rgba(11, 20, 32, 0.12);

  /* Type */
  --font-display: "Archivo Expanded", "Archivo", system-ui, sans-serif;
  --font-head:    "Archivo", system-ui, sans-serif;
  --font-body:    "Manrope", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Spacing scale (8px base) */
  --space-1: 8px;  --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-5: 48px; --space-6: 64px; --space-8: 96px; --space-10: 140px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-cine: cubic-bezier(0.65, 0, 0.35, 1);

  --container-max: 1280px;
}

/* Bridge legacy variable names to new tokens so existing CSS keeps working
   while pages migrate. Safe to remove once all pages reference --ink/--red/etc. */
:root {
  --color-navy: var(--ink);
  --color-navy-dark: var(--ink);
  --color-accent: var(--red);
  --color-accent-hover: var(--red-deep);
  --cine-ink: var(--ink);
  --cine-amber: var(--amber);
  --cine-paper: var(--bone);
}