/* =====================================================
   BUBAKI DESIGN — Design Tokens
   ===================================================== */

:root {

  /* ---- Brand palette (warm red → cool teal-blue) ---- */
  --color-red:    #F94144;
  --color-orange: #F3722C;
  --color-amber:  #F8961E;
  --color-yellow: #F9C74F;
  --color-green:  #90BE6D;
  --color-teal:   #43AA8B;
  --color-blue:   #577590;

  /* ---- Semantic color roles (light theme) ---- */
  --color-accent:        #F3722C;
  --color-accent-hover:  #D85D1A;
  --color-accent-alt:    #43AA8B;
  --color-bg:            #F8F5EF;
  --color-surface:       #FFFFFF;
  --color-surface-mid:   #F0EDE6;
  --color-surface-hover: #E8E3D8;
  --color-text:          #1A1714;
  --color-text-muted:    #6B6158;
  --color-border:        #DDD8CC;
  --color-white:         #FFFFFF;
  --color-black:         #1A1714;

  /* ---- Typography ---- */
  --font-display: 'Nunito', sans-serif;
  --font-body:    'Nunito', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ---- Type scale ---- */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */

  /* ---- Spacing (8px base) ---- */
  --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;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-pad: clamp(1rem, 5vw, 3rem);
  --nav-height:    4.5rem;

  /* ---- Borders & Radius ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;
  --border:      1px solid var(--color-border);

  /* ---- Transitions ---- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ---- Shadows (adjusted for light background) ---- */
  --shadow-sm:     0 1px 3px rgba(26, 23, 20, 0.08);
  --shadow-md:     0 4px 16px rgba(26, 23, 20, 0.12);
  --shadow-lg:     0 8px 32px rgba(26, 23, 20, 0.16);
  --shadow-xl:     0 16px 48px rgba(26, 23, 20, 0.20);
  --shadow-accent: 0 0 24px rgba(243, 114, 44, 0.25);
}