/* ==========================================================================
   Design Tokens — Verse Brand System
   From Verse brand guidelines (Figma export Feb 2026)

   Font: Degular (self-hosted)
   Logo: Hand (primary), V (secondary)
   ========================================================================== */

:root {
  /* ---- Core Blues ---- */
  --color-navy:         #0A2D52;
  --color-blue:         #1565C0;
  --color-blue-bright:  #2B87E3;
  --color-blue-light:   #7FBAF5;

  /* ---- Core Creams ---- */
  --color-cream:        #F5EDD8;
  --color-cream-light:  #FBF6ED;

  /* ---- Augmented: Forest Fall ---- */
  --color-amber:        #C58A1A;
  --color-burgundy:     #7B1A2B;
  --color-purple:       #3C1053;
  --color-teal:         #0D5C5A;

  /* ---- Augmented: Light variants ---- */
  --color-amber-light:    #FDF5E6;
  --color-burgundy-light: #FCE8EC;
  --color-purple-light:   #F3E8F9;
  --color-teal-light:     #E6F5F4;

  /* ---- Neutrals / Grays ---- */
  --color-ink:          #1A1A1A;
  --color-gray-dark:    #5C6168;
  --color-gray-mid:     #99A3AD;
  --color-gray-light:   #D8DEE6;
  --color-white:        #FFFFFF;

  /* ---- Semantic aliases ---- */
  --color-primary:       var(--color-blue);
  --color-primary-dark:  var(--color-navy);
  --color-primary-light: var(--color-blue-light);
  --color-primary-pale:  var(--color-cream-light);
  --color-ink-mid:       var(--color-gray-dark);
  --color-ink-light:     var(--color-gray-mid);
  --color-border:        var(--color-gray-light);
  --color-warm-white:    var(--color-cream-light);

  /* ---- Verse Studio Brand ---- */
  --verse-blue:          #2B5EA7;
  --verse-blue-light:    #D6E4F5;
  --verse-blue-pale:     #EDF3FB;
  --verse-beige:         #F5EDD8;
  --verse-beige-light:   #FBF6ED;
  --verse-line:          var(--verse-blue);

  /* ---- Typography ----
     Degular Bold for titles/headings (self-hosted)
     Inter for body copy (Google Fonts) - improved readability */
  --font-display:  'Degular', sans-serif;
  --font-heading:  'Degular', sans-serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- Type Scale ----
     Brand: headers Bold min 18pt screen / 14pt print
     Body Regular min 10pt screen / 8pt print
     High contrast: headers >50% larger than body */
  --text-xs:    0.625rem;   /* 10px */
  --text-sm:    0.75rem;    /* 12px */
  --text-base:  0.875rem;   /* 14px */
  --text-md:    1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px — header min */
  --text-xl:    1.375rem;   /* 22px */
  --text-2xl:   1.75rem;    /* 28px */
  --text-3xl:   2.25rem;    /* 36px */
  --text-4xl:   3rem;       /* 48px */
  --text-5xl:   4rem;       /* 64px */

  /* ---- 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-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-14:   3.5rem;
  --space-16:   4rem;
  --space-20:   5rem;

  /* ---- Border Radius ---- */
  --radius-sm:  0.375rem;
  --radius-md:  0.5rem;
  --radius-lg:  0.75rem;
  --radius-xl:  1rem;

  /* ---- Shadows ---- */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);

  /* ---- Layout ---- */
  --page-max-width: 760px;
  --page-wide-max:  1080px;
  --page-padding:   2.5rem;
}