/* ================================================================
   DESIGN TOKENS
   Central place for all colors, fonts, spacing, and animation values.
   Change these to update the entire site's look and feel.
================================================================ */

/* Layer order declaration — defines cascade priority (first = lowest) */
@layer tokens, reset, base, layout, components, utilities;

@layer tokens {
  :root {
    /* Backgrounds */
    --bg:        #F5F0E8;
    --bg-alt:    #EDE7DA;
    --card:      #E7E0D2;
    --card-h:    #DDD5C5;

    /* Borders */
    --line:      rgba(45, 30, 8, .10);
    --line-g:    rgba(120, 88, 30, .28);

    /* Typography colors */
    --t-head:    #1A1004;
    --t-body:    rgba(28, 18, 4, .68);
    --t-muted:   rgba(28, 18, 4, .42);

    /* Brand gold palette */
    --gold:      #8A6620;
    --gold-mid:  #AA8230;
    --gold-lt:   #C8A050;

    /* Font stacks */
    --serif:     'Cormorant Garamond', Georgia, serif;
    --sans:      'DM Sans', system-ui, sans-serif;
    --mono:      'Space Mono', monospace;

    /* Animation curves */
    --ease:      cubic-bezier(.16, 1, .3, 1);
    --spring:    cubic-bezier(.34, 1.56, .64, 1);

    /* Radius */
    --r:         14px;

    /* Spacing scale */
    --space-xs:  8px;
    --space-s:   16px;
    --space-m:   24px;
    --space-l:   48px;
    --space-xl:  80px;
    --space-2xl: 120px;
  }
}