/* ============================================================
   ROSEWOOD MODELS — CSS Custom Properties
   All design tokens live here. Never hardcode values elsewhere.
   ============================================================ */

   :root {

    /* ─── Colors ─────────────────────────────────────── */
    --color-bg:          #010101;   /* 60% dominant — near black */
    --color-surface:     #222222;   /* 30% secondary — dark grey */
    --color-accent:      #800080;   /* 10% accent — purple */
    --color-text:        #f0f0f0;   /* primary text */
    --color-muted:       #888888;   /* secondary / metadata text */
    --color-border:      #2a2a2a;   /* subtle borders and dividers */
  
    /* ─── Typography ─────────────────────────────────── */
    --font-display:      'Cormorant Garamond', serif;   /* headings, model names, identity */
    --font-utility:      'DM Sans', sans-serif;         /* nav, body, stats, measurements */
  
    --size-xs:           0.75rem;    /* 12px */
    --size-sm:           0.875rem;   /* 14px */
    --size-base:         1rem;       /* 16px */
    --size-md:           1.25rem;    /* 20px */
    --size-lg:           1.75rem;    /* 28px */
    --size-xl:           2.5rem;     /* 40px */
    --size-2xl:          3.5rem;     /* 56px */
    --size-3xl:          5rem;       /* 80px */
  
    --leading-tight:     1.1;
    --leading-normal:    1.5;
    --leading-loose:     1.8;
  
    --tracking-tight:    -0.02em;
    --tracking-normal:   0em;
    --tracking-wide:     0.08em;
    --tracking-wider:    0.15em;
  
    /* ─── Spacing ────────────────────────────────────── */
    --space-xs:          8px;
    --space-sm:          16px;
    --space-md:          32px;
    --space-lg:          64px;
    --space-xl:          128px;
  
    /* ─── Layout ─────────────────────────────────────── */
    --max-width:         1440px;
    --grid-gap:          2px;
    --page-margin:       40px;
  
    /* ─── Transitions ────────────────────────────────── */
    --transition-base:   300ms ease;
    --transition-slow:   600ms ease;
  
  }
  
  /* ─── Tablet ──────────────────────────────────────── */
  @media (max-width: 768px) {
    :root {
      --page-margin:     24px;
      --size-3xl:        3.5rem;
      --size-2xl:        2.5rem;
      --size-xl:         2rem;
    }
  }
  
  /* ─── Mobile ──────────────────────────────────────── */
  @media (max-width: 390px) {
    :root {
      --page-margin:     16px;
      --size-3xl:        2.75rem;
      --size-2xl:        2rem;
      --size-xl:         1.75rem;
    }
  }