/* ============================================================
   ullim Design System 1.0 — CSS Tokens
   Last Updated: 2025.11.20
   For use with: ullim DJ Traveler Registry (ullim.link)
   ============================================================ */

:root,
[data-theme="light"] {
  --color-bg:           #F5F5DC;
  --color-bg-card:      #F5F5DC;
  --color-bg-input:     rgba(26, 43, 60, 0.04);
  --color-bg-input-focus: rgba(44, 122, 123, 0.06);
  --color-bg-success:   rgba(44, 122, 123, 0.05);
  --color-nav-bg:       rgba(245, 245, 220, 0.95);

  --color-text:         #1A2B3C;
  --color-text-muted:   #8B6F62;
  --color-text-faint:   rgba(139, 110, 98, 0.45);
  --color-logo:         #1A2B3C;

  --color-accent:       #2C7A7B;
  --color-accent-dim:   rgba(44, 122, 123, 0.07);
  --color-gold:         #C2B280;

  --color-border:       rgba(26, 43, 60, 0.15);
  --color-border-accent: rgba(44, 122, 123, 0.35);

  --fx-particle:        44, 122, 123;
  --fx-wave:            194, 178, 128;
  --fx-glow:            rgba(194, 178, 128, 0.18);
}

[data-theme="dark"] {
  --color-bg:           #0E1A1F;
  --color-bg-card:      rgba(245, 245, 220, 0.04);
  --color-bg-input:     rgba(245, 245, 220, 0.04);
  --color-bg-input-focus: rgba(44, 122, 123, 0.07);
  --color-bg-success:   rgba(44, 122, 123, 0.06);
  --color-nav-bg:       rgba(14, 26, 31, 0.95);

  --color-text:         #F5F5DC;
  --color-text-muted:   #B29588;
  --color-text-faint:   rgba(178, 149, 136, 0.45);
  --color-logo:         #F5F5DC;

  --color-accent:       #2C7A7B;
  --color-accent-dim:   rgba(44, 122, 123, 0.08);
  --color-gold:         #C2B280;

  --color-border:       rgba(178, 149, 136, 0.22);
  --color-border-accent: rgba(44, 122, 123, 0.4);

  --fx-particle:        194, 178, 128;
  --fx-wave:            44, 122, 123;
  --fx-glow:            rgba(44, 122, 123, 0.08);
}

:root {
  --font-display:  'Cormorant Garamond', 'Parmigiano Caption', serif;
  --font-body:     'DM Mono', 'Arita Buri', monospace;

  --fw-title:      300;
  --fw-body:       400;
  --fw-bold:       600;

  --lh-body:       1.65;
  --lh-display:    1.05;
  --lh-relaxed:    1.9;

  --ls-label:      0.25em;
  --ls-eyebrow:    0.3em;
  --ls-logo:       0.18em;

  --fs-eyebrow:    0.62rem;
  --fs-label:      0.58rem;
  --fs-body:       0.8rem;
  --fs-body-lg:    1rem;
  --fs-display-sm: 1.4rem;
  --fs-display-md: 2.7rem;
  --fs-display-lg: clamp(2.8rem, 7vw, 5.2rem);

  --spacing-xs:    0.5rem;
  --spacing-sm:    1rem;
  --spacing-md:    1.5rem;
  --spacing-lg:    2.5rem;
  --spacing-xl:    4rem;
  --spacing-2xl:   6rem;
  --spacing-3xl:   8rem;

  --max-width:     720px;
  --border-radius: 2px;

  --btn-border:    0.5px solid var(--color-accent);
  --btn-color:     var(--color-accent);
  --btn-hover-bg:  var(--color-accent);
  --btn-hover-color: var(--color-bg);

  --input-border:  0.5px solid var(--color-border);
  --input-radius:  2px;
  --input-padding: 0.82rem 1rem;

  --divider:       0.5px solid var(--color-border);

  --nav-backdrop:  blur(12px);

  --transition-base:   0.3s ease;
  --transition-slow:   0.5s ease;
  --transition-theme:  0.5s ease;
}