/* ============================================================
   SANKOFA DESIGN TOKENS
   Single source of truth for all design decisions.
   Every value here is derived from the reference images.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800&family=Montserrat:wght@400;500;600;700;800&display=swap');
:root {
  /* --- COLOUR PALETTE --- */
  --color-gold:         #FCD116;   /* Primary CTAs, medallion, badge circles */
  --color-gold-dark:    #E8B800;   /* Gold hover states */
  --color-green:        #046A38;   /* Headers, active nav, icon circles */
  --color-green-dark:   #034D29;   /* Green hover states */
  --color-red:          #CE1126;   /* Kicker labels ONLY — never large fill */
  --color-dark:         #1E160D;   /* Hero sections, dark backgrounds */
  --color-charcoal:     #2B241A;   /* Body text */
  --color-charcoal-light: #5C4E3A; /* Secondary body text */
  --color-light-fill:   #FAF6EC;   /* Card backgrounds */
  --color-warm-border:  #EADFC8;   /* Card borders */
  --color-warm-bg:      #F5EDD8;   /* Map background, page tints */
  --color-white:        #FFFFFF;

  /* Dungeon-specific muted palette */
  --color-dungeon-bg:   #EDE8E0;   /* Slightly cooler card bg for dungeon */
  --color-dungeon-text: #3D3530;   /* Slightly cooler body text */

  /* Semantic colours */
  --color-warning-bg:   #FEF3C7;
  --color-warning-border: #F59E0B;
  --color-warning-text: #92400E;
  --color-success:      #046A38;
  --color-locked:       #9E9E9E;
  --color-locked-bg:    #F0EDE8;

  /* --- TYPOGRAPHY --- */
  --font-serif: 'Montserrat', Cambria, Georgia, serif;
  --font-sans:    'Montserrat', Calibri, 'Segoe UI', system-ui, sans-serif;
  /* Scale */
  --text-xs:   0.6875rem;  /* 11px — kicker labels */
  --text-sm:   0.8125rem;  /* 13px — captions, secondary */
  --text-base: 1rem;       /* 16px — body */
  --text-lg:   1.125rem;   /* 18px — card body, slightly larger */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px — section headings */
  --text-3xl:  1.875rem;   /* 30px — page headings */
  --text-4xl:  2.25rem;    /* 36px — hero headings */
  --text-5xl:  3rem;       /* 48px — Route Complete hero */

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-extrabold: 800;

  /* Letter spacing */
  --tracking-kicker: 0.12em;
  --tracking-wide:   0.05em;

  /* --- SPACING SCALE --- */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-7:  1.75rem;   /* 28px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* --- BORDER RADIUS --- */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* --- SHADOWS --- */
  --shadow-xs:   0 1px 3px rgba(30, 22, 13, 0.06);
  --shadow-sm:   0 2px 8px rgba(30, 22, 13, 0.08);
  --shadow-md:   0 4px 16px rgba(30, 22, 13, 0.10);
  --shadow-lg:   0 8px 32px rgba(30, 22, 13, 0.14);
  --shadow-inset: inset 0 1px 3px rgba(30, 22, 13, 0.10);

  /* --- LAYOUT --- */
  --nav-height:      68px;    /* Bottom nav mobile height */
  --sidebar-width:   220px;   /* Desktop left sidebar width */
  --page-max-width:  480px;   /* Mobile page max-width (centered on large screens) */
  --content-max:     1100px;  /* Desktop content container max-width */
  --reading-max:     800px;   /* Voices story detail max-width (reading comfort) */
  --desktop-break:   1024px;  /* Desktop breakpoint */

  /* Header */
  --header-height:   60px;
  --header-bg:       var(--color-green);
  --header-color:    var(--color-white);

  /* --- TRANSITIONS --- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter:    cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* --- Z-INDEX LAYERS --- */
  --z-base:    0;
  --z-card:    10;
  --z-overlay: 100;
  --z-nav:     200;
  --z-modal:   300;
}