/* ═══════════════════════════════════════════════════════
   AVENUE TWO HOSTING — Brand Design Tokens
   Primary: #00245D (PMS 2767 Navy)
   Secondary: #BFA980 (Warm Gold)
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Brand Colors ──────────────────────────────────── */
  --navy:          #00245D;
  --navy-800:      #001f52;
  --navy-600:      #1a3a73;
  --navy-400:      #3a5a93;
  --navy-100:      #e8ecf5;
  --navy-50:       #f2f4fa;

  --gold:          #BFA980;
  --gold-dark:     #a08860;
  --gold-light:    #ddd0b8;
  --gold-50:       #f9f5ef;

  --cream:         #F8F6F1;
  --cream-dark:    #EDE9E0;

  /* ── Semantic Color Roles ──────────────────────────── */
  --color-bg:            var(--cream);
  --color-surface:       #FFFFFF;
  --color-surface-alt:   var(--navy-50);
  --color-border:        #DDD9D0;
  --color-divider:       #E5E1D8;

  --color-text:          #1A1814;
  --color-text-muted:    #5C5A54;
  --color-text-faint:    #9C9A94;
  --color-text-inverse:  #FFFFFF;

  --color-primary:       var(--navy);
  --color-primary-hover: var(--navy-800);
  --color-accent:        var(--gold);
  --color-accent-hover:  var(--gold-dark);

  /* ── Typography ────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-serif:   'Cormorant Garamond', 'Georgia', serif;
  --font-body:    'Switzer', 'Helvetica Neue', sans-serif;

  /* ── Type Scale ────────────────────────────────────── */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(3rem,     0.5rem  + 7vw,    8rem);

  /* ── Spacing ────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-9:  2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-18: 4.5rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Layout ─────────────────────────────────────────── */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;

  /* ── Radii ──────────────────────────────────────────── */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1.25rem;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0,36,93,0.08);
  --shadow-md: 0 4px 16px rgba(0,36,93,0.10);
  --shadow-lg: 0 12px 40px rgba(0,36,93,0.14);

  /* ── Transitions ─────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 200ms var(--ease-out);
}

/* Dark mode — navy-inverted, gold accents */
[data-theme="dark"] {
  --color-bg:           #0a0f1e;
  --color-surface:      #0d1428;
  --color-surface-alt:  #111c38;
  --color-border:       #1e2d50;
  --color-divider:      #192444;

  --color-text:         #EAE8E2;
  --color-text-muted:   #8A9ABB;
  --color-text-faint:   #4A5A7A;
  --color-text-inverse: #0a0f1e;

  --color-primary:      #4a7ac8;
  --color-primary-hover:#6090d8;
  --color-accent:       var(--gold);
  --color-accent-hover: var(--gold-light);
}