/* =====================================================================
   DCD 2026 — Design tokens
   Single source of truth for color, type, spacing, radius, shadows.
   Mirrors /home/u661276900/.claude/modules/dcd-redesign-visual-system.md
   ===================================================================== */

:root {
  /* ── Color: Concert Hall Modern (locked) ──────────────────────── */
  --color-ink:        #0a0e1a;
  --color-navy:       #1a2540;
  --color-navy-2:     #2a3658;
  --color-cream:      #f7f1e1;
  --color-cream-2:    #ece4ce;
  --color-bone:       #fbf7ed;
  --color-gold:       #c9a25b;
  --color-gold-deep:  #a07f3a;
  --color-gold-soft:  #e6d2a3;

  /* Semantic */
  --color-bg:                 var(--color-cream);
  --color-bg-elev:            var(--color-bone);
  --color-bg-band:            var(--color-cream-2);
  --color-bg-dark:            var(--color-navy);
  --color-bg-dark-elev:       var(--color-navy-2);
  --color-text:               var(--color-ink);
  --color-text-on-dark:       var(--color-cream);
  --color-text-muted:         #4a5468;
  --color-text-muted-on-dark: #b8bfd0;
  --color-border:             var(--color-gold-soft);
  --color-border-strong:      var(--color-gold-deep);
  --color-link:               var(--color-navy);
  --color-link-hover:         var(--color-gold-deep);
  --color-link-on-dark:       var(--color-gold);
  --color-link-on-dark-hover: var(--color-gold-soft);
  --color-cta-bg:             var(--color-gold);
  --color-cta-text:           var(--color-ink);
  --color-cta-bg-hover:       var(--color-gold-deep);
  --color-cta-text-hover:     var(--color-bone);
  --color-cta-border:         var(--color-gold-deep);

  /* Status */
  --color-success: #2c6d4f;
  --color-warning: #b85d11;
  --color-danger:  #a52a2a;
  --color-info:    #2c5282;

  /* ── Iberian / South American vertical accent layer ───────────── */
  --color-accent:       #b85d3a;
  --color-accent-deep:  #8e3f23;
  --color-accent-soft:  #e9c5b3;

  /* ── Type ──────────────────────────────────────────────────── */
  --font-display: "Cormorant Garamond", "Cormorant", "Garamond", "Times New Roman", Georgia, serif;
  --font-heading: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-body:    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale — clamp(min, preferred, max) — mobile → desktop */
  --fs-xs:   clamp(0.75rem,   0.72rem + 0.15vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem,  0.84rem + 0.18vw, 0.9375rem);
  --fs-base: clamp(1rem,      0.95rem + 0.25vw, 1.0625rem);
  --fs-md:   clamp(1.125rem,  1.06rem + 0.32vw, 1.25rem);
  --fs-lg:   clamp(1.375rem,  1.28rem + 0.5vw,  1.625rem);
  --fs-xl:   clamp(1.75rem,   1.55rem + 1vw,    2.25rem);
  --fs-2xl:  clamp(2.25rem,   1.85rem + 2vw,    3rem);
  --fs-3xl:  clamp(2.75rem,   2.0rem  + 3.75vw, 4.25rem);
  --fs-hero: clamp(3rem,      2.0rem  + 5vw,    5.5rem);

  /* Line height */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-default: 1.5;
  --lh-loose:   1.65;

  /* Letter spacing */
  --ls-tight:   -0.005em;
  --ls-default: 0;
  --ls-eyebrow:  0.18em;
  --ls-cta:      0.09em;
  --ls-press:    0.12em;

  /* ── Spacing ─────────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-8:  3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-14: 8rem;
  --space-16: 10rem;

  /* ── Radius ──────────────────────────────────────────────────── */
  --radius-sm:   2px;
  --radius:      4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* ── Shadow ──────────────────────────────────────────────────── */
  --shadow-1:   0 1px 2px rgba(10,14,26,0.06), 0 1px 3px rgba(10,14,26,0.04);
  --shadow-2:   0 4px 12px rgba(10,14,26,0.08), 0 2px 6px rgba(10,14,26,0.05);
  --shadow-3:   0 12px 32px rgba(10,14,26,0.14), 0 6px 14px rgba(10,14,26,0.08);
  --shadow-gold:0 4px 24px rgba(201,162,91,0.32);

  /* ── Layout primitives ───────────────────────────────────────── */
  --content-width:  72ch;
  --wide-width:     1180px;
  --full-width:     100%;
  --header-height:  80px;
  --header-height-mobile: 64px;
  --section-pad-y-desktop: var(--space-12);
  --section-pad-y-tablet:  var(--space-10);
  --section-pad-y-mobile:  var(--space-8);

  /* ── Motion ──────────────────────────────────────────────────── */
  --t-fast:   120ms;
  --t-medium: 220ms;
  --t-slow:   400ms;
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.0, 0, 0.2, 1);

  /* ── z-index scale ───────────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-sticky:    100;
  --z-overlay:   1000;
  --z-modal:     2000;
  --z-toast:     3000;
}

/* ── Dark mode (auto) ───────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:           var(--color-ink);
    --color-bg-elev:      var(--color-navy);
    --color-bg-band:      var(--color-navy-2);
    --color-bg-dark:      #050810;
    --color-bg-dark-elev: var(--color-navy);
    --color-text:         var(--color-cream);
    --color-text-muted:   #a8b0c2;
    --color-link:         var(--color-gold);
    --color-link-hover:   var(--color-gold-soft);
    --color-cta-bg:       var(--color-gold);
    --color-cta-text:     var(--color-ink);
    --color-border:       var(--color-navy-2);
    --color-border-strong:var(--color-gold-deep);
  }
}