/* ============================================================
   KINGNESS COFFEE — DESIGN TOKENS
   Single source of truth for color, type, spacing, radii,
   shadows, motion. All tokens are CSS custom properties.
   ============================================================ */

:root {
  /* -------- COLOR -------- */
  --color-bg:            #FFFBF5;  /* warm white — page surface */
  --color-surface:       #FFFFFF;  /* pure white — cards, inputs */
  --color-surface-alt:   #FAF4EA;  /* faintly warmer — alt sections */
  --color-text:          #1F1410;  /* near-black, warm undertone */
  --color-text-muted:    #6F4E37;  /* cocoa — secondary copy */
  --color-text-faint:    #9C8576;  /* desaturated — captions, meta */
  --color-accent:        #5C2309;  /* deep mahogany sienna — CTAs, highlights */
  --color-accent-hover:  #3D1404;
  --color-accent-soft:   #ECD8C0;  /* warm cream tint — backgrounds, badges */
  --color-border:        #F0E6D8;  /* linen — dividers */
  --color-border-strong: #E0D0BB;
  --color-overlay:       rgba(31, 20, 16, 0.55); /* drawer backdrop */
  --color-success:       #5C7A4F;
  --color-danger:        #B0463A;

  /* -------- TYPOGRAPHY — FAMILIES -------- */
  --font-display: 'Inter', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;
  --font-body:    'Istok Web', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;

  /* -------- TYPOGRAPHY — SIZE SCALE (1.250 major-third-ish, tuned) -------- */
  --text-xs:    0.75rem;    /* 12 — meta, captions */
  --text-sm:    0.875rem;   /* 14 — small */
  --text-base:  1rem;       /* 16 — body default */
  --text-md:    1.125rem;   /* 18 — emphasized body */
  --text-lg:    1.375rem;   /* 22 — small headings, subtitles */
  --text-xl:    1.75rem;    /* 28 — section eyebrow / h4 */
  --text-2xl:   2.25rem;    /* 36 — h3 */
  --text-3xl:   3rem;       /* 48 — h2 */
  --text-4xl:   4rem;       /* 64 — h1 */
  --text-5xl:   5.5rem;     /* 88 — hero display */
  --text-6xl:   7.5rem;     /* 120 — oversized hero */

  /* -------- TYPOGRAPHY — WEIGHTS -------- */
  --weight-extralight: 200;  /* display type — luxury fashion feel */
  --weight-light:      300;  /* default for headings */
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;

  /* -------- TYPOGRAPHY — LINE HEIGHT -------- */
  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;
  --leading-loose:   1.9;

  /* -------- TYPOGRAPHY — TRACKING -------- */
  /* With light weights, ease the negative tracking — thin letters need air. */
  --tracking-tight:  -0.012em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.14em;   /* eyebrows / small caps */

  /* -------- SPACING (4px base) -------- */
  --space-2xs: 0.25rem;   /* 4 */
  --space-xs:  0.5rem;    /* 8 */
  --space-sm:  0.75rem;   /* 12 */
  --space-md:  1rem;      /* 16 */
  --space-lg:  1.5rem;    /* 24 */
  --space-xl:  2rem;      /* 32 */
  --space-2xl: 3rem;      /* 48 */
  --space-3xl: 4rem;      /* 64 */
  --space-4xl: 6rem;      /* 96 */
  --space-5xl: 8rem;      /* 128 */

  /* -------- RADII -------- */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* -------- SHADOWS (warm-tinted, restrained) -------- */
  --shadow-xs:    0 1px 2px rgba(31, 20, 16, 0.05);
  --shadow-sm:    0 2px 6px rgba(31, 20, 16, 0.06);
  --shadow-md:    0 8px 24px rgba(31, 20, 16, 0.08);
  --shadow-lg:    0 20px 48px rgba(31, 20, 16, 0.12);
  --shadow-drawer: 0 -8px 32px rgba(31, 20, 16, 0.16);
  --shadow-focus: 0 0 0 3px rgba(212, 99, 42, 0.25);

  /* -------- MOTION -------- */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --duration-deliberate: 700ms;

  /* -------- LAYOUT -------- */
  --container-narrow: 720px;
  --container-base:   1200px;
  --container-wide:   1440px;
  --nav-height:       80px;

  /* -------- Z-INDEX LAYERS -------- */
  --z-base:    1;
  --z-nav:     50;
  --z-drawer-backdrop: 90;
  --z-drawer:  100;
  --z-toast:   200;
}

/* Slightly reduce hero scale on narrow viewports so display type breathes. */
@media (max-width: 768px) {
  :root {
    --text-4xl: 2.75rem;
    --text-5xl: 3.5rem;
    --text-6xl: 4.5rem;
    --space-5xl: 5rem;
    --space-4xl: 4rem;
    --nav-height: 64px;
  }
}