/* ============================================================
   CATENA DESIGN TOKENS
   Single source of truth for all colors, type, spacing, radius
   ============================================================ */

@font-face {
  font-family: 'Fredoka';
  src: url('../assets/fonts/Fredoka-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: block;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fredoka';
  src: url('../assets/fonts/Fredoka-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JulienneStandard';
  src: url('../assets/fonts/JulienneStandard-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'JulienneBold';
  src: url('../assets/fonts/JulienneBold-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'JulienneLight';
  src: url('../assets/fonts/JulienneLight-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

:root {
  /* --- Brand Colors --- */
  --color-cream:          #fefcf4;
  --color-tan:            #A18A6D;
  --color-tan-light:      #D8C3BF;

  /* --- Text --- */
  --color-header:         #563d29;
  --color-text-secondary: #766352;
  --color-inactive:       #B2A99E;

  /* --- Surfaces --- */
  --color-surface-yellow: #fefcf4;
  --color-surface-sage:   #B1BE89;
  --color-surface-tan:    #D8C3BF;
  --color-white:          #ffffff;

  /* --- Accents --- */
  --color-accent-orange:  #Eea965;
  --color-accent-blush:   #FED6DE;

  /* --- Semantic --- */
  --color-error:          #C45161;
  --color-success:        #305C3C;

  /* --- Tag Palette (used in story timeline, badges) --- */
  --tag-1:  #E8605A;
  --tag-2:  #F0876A;
  --tag-3:  #F5A97F;
  --tag-4:  #F5C842;
  --tag-5:  #F5DFA0;
  --tag-6:  #A8C97F;
  --tag-7:  #7DAE8A;
  --tag-8:  #5ECFB0;
  --tag-9:  #72C3E8;
  --tag-10: #7AAEE0;
  --tag-11: #8B9FD4;
  --tag-12: #B8A0D4;
  --tag-13: #9B6BA8;
  --tag-14: #E891B8;
  --tag-15: #F0A0C0;

  /* --- Typography --- */
  --font-display:   'Fredoka', sans-serif;
  --font-body:      'JulienneStandard', 'Fredoka', sans-serif;
  --font-body-bold: 'JulienneBold', 'Fredoka', sans-serif;
  --font-body-light: 'JulienneLight', 'Fredoka', sans-serif;

  --text-hero:      clamp(48px, 7vw, 88px);
  --text-h1:        clamp(36px, 4.5vw, 60px);
  --text-h2:        clamp(30px, 3.5vw, 48px);
  --text-h3:        1.3rem;
  --text-body:      1.1rem;
  --text-small:     1rem;
  --text-xs:        0.85rem;

  --weight-semibold: 600;
  --weight-bold:     700;

  /* --- Spacing scale --- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;

  /* --- Radius --- */
  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  36px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:  0 1px 4px rgba(86,61,41,0.08);
  --shadow-md:  0 4px 20px rgba(86,61,41,0.10);
  --shadow-lg:  0 12px 48px rgba(86,61,41,0.12);

  /* --- Transitions --- */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;

  /* --- Layout --- */
  --max-width: 1280px;
  --section-padding: var(--space-10) 0;
}