/* ==========================================================================
   Cimero Studio — design tokens
   Brand palette first, then semantic tokens that every component uses.
   To rebrand a landing, override the SEMANTIC tokens in its theme.css
   (never the component CSS).
   ========================================================================== */

:root {
  /* Brand palette */
  --cimero-black: #0d0d0d;
  --cimero-gold: #c8a96e;
  --cimero-offwhite: #f5f0e8;
  --cimero-surface-dark: #1a1a1a;
  --cimero-border-light: #e2ddd3;

  /* Derived (AA-checked) — gold is decorative/large-text only on light backgrounds */
  --cimero-gold-ink: #7a5f2c;      /* 5.3:1 on off-white — gold for text on light */
  --cimero-muted-dark: #a39d93;    /* 6.5:1 on #1a1a1a */
  --cimero-muted-light: #5c574f;   /* 6.3:1 on off-white */
  --cimero-border-strong: #8a8478; /* 3.3:1 on off-white — form control borders */

  /* Semantic: light context (default) */
  --color-bg: var(--cimero-offwhite);
  --color-surface: #fbf8f3;
  --color-text: var(--cimero-black);
  --color-text-muted: var(--cimero-muted-light);
  --color-border: var(--cimero-border-light);
  --color-border-strong: var(--cimero-border-strong);
  --color-accent: var(--cimero-gold);
  --color-accent-ink: var(--cimero-gold-ink);
  --color-on-accent: var(--cimero-black);

  /* Semantic: dark context (hero, footer, demo bar) */
  --color-dark-bg: var(--cimero-black);
  --color-dark-surface: var(--cimero-surface-dark);
  --color-dark-text: var(--cimero-offwhite);
  --color-dark-muted: var(--cimero-muted-dark);
  --color-dark-border: #3a3631;

  /* Feedback */
  --color-error: #b3261e;
  --color-success: #2f6b3a;

  /* Typography */
  --font-display: "Cormorant Garamond", "Cormorant Fallback", Georgia, "Times New Roman", serif;
  --font-body: "Jost", "Jost Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-2xl: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --text-3xl: clamp(2.6rem, 1.8rem + 4vw, 4.75rem);
  --leading-tight: 1.1;
  --leading-normal: 1.65;
  --tracking-wide: 0.16em;

  /* Spacing & layout */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: clamp(4.5rem, 3rem + 6vw, 8rem);
  --container: 72rem;
  --container-narrow: 46rem;
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);

  /* Shape & motion */
  --radius-sm: 2px;
  --radius: 4px;
  --border-width: 1px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration: 240ms;
}