/* Makrona Design Tokens — CSS Variable Export
 *
 * Source of truth: tokens.json in this folder.
 * Keep this file in sync when tokens.json changes.
 * Never hard-code these values elsewhere — reference the variable.
 */

:root {
  /* ── Brand palette (exactly four colours — no others) ─────── */
  --mk-green:        #04292a;  /* Makrona Green:  primary dark surface, body text */
  --mk-yellow:       #f2af4c;  /* Makrona Yellow: highlights, numbers, secondary accents */
  --mk-orange:       #f07b49;  /* Makrona Orange: primary CTA, links, primary accent */
  --mk-white:        #ffffff;  /* White:          backgrounds, on-dark text */

  /* ── Derived surfaces ─────────────────────────────────────── */
  --mk-surface-muted: #fff7ec;  /* warm yellow-tinted card background */
  --mk-text:          var(--mk-green);
  --mk-text-on-dark:  var(--mk-white);
  --mk-text-muted:    #5b574e;
  --mk-border:        #e2ddd0;

  /* ── Semantic (UI states) — kept distinct from brand ─────── */
  --mk-success: #2E7D32;
  --mk-warning: #E65100;
  --mk-danger:  #C62828;
  --mk-info:    #1565C0;

  /* ── Spacing (4px base scale) ─────────────────────────────── */
  --mk-space-0:  0;
  --mk-space-1:  4px;
  --mk-space-2:  8px;
  --mk-space-3:  12px;
  --mk-space-4:  16px;
  --mk-space-5:  20px;
  --mk-space-6:  24px;
  --mk-space-8:  32px;
  --mk-space-10: 40px;
  --mk-space-12: 48px;
  --mk-space-16: 64px;
  --mk-space-20: 80px;
  --mk-space-24: 96px;

  /* ── Radii ────────────────────────────────────────────────── */
  --mk-radius-sm:   4px;
  --mk-radius-md:   8px;
  --mk-radius-lg:   12px;
  --mk-radius-xl:   16px;
  --mk-radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────────────────── */
  --mk-shadow-sm: 0 1px 2px rgba(4,41,42,0.06);
  --mk-shadow-md: 0 4px 6px -1px rgba(4,41,42,0.10), 0 2px 4px -2px rgba(4,41,42,0.10);
  --mk-shadow-lg: 0 10px 15px -3px rgba(4,41,42,0.10), 0 4px 6px -4px rgba(4,41,42,0.08);
  --mk-shadow-xl: 0 20px 25px -5px rgba(4,41,42,0.10), 0 8px 10px -6px rgba(4,41,42,0.08);

  /* ── Typography ───────────────────────────────────────────── */
  --mk-font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --mk-font-display: 'Poppins', 'Inter', system-ui, sans-serif;

  --mk-text-xs:   12px;
  --mk-text-sm:   14px;
  --mk-text-base: 16px;
  --mk-text-lg:   18px;
  --mk-text-xl:   20px;
  --mk-text-2xl:  24px;
  --mk-text-3xl:  30px;
  --mk-text-4xl:  36px;
  --mk-text-5xl:  48px;

  --mk-weight-regular:  400;
  --mk-weight-medium:   500;
  --mk-weight-semibold: 600;
  --mk-weight-bold:     700;

  --mk-leading-tight:   1.2;
  --mk-leading-normal:  1.5;
  --mk-leading-relaxed: 1.65;

  /* ── Layout ───────────────────────────────────────────────── */
  --mk-container-max: 1100px;
  --mk-breakpoint-sm: 640px;
  --mk-breakpoint-md: 768px;
  --mk-breakpoint-lg: 1024px;
  --mk-breakpoint-xl: 1280px;

  /* ── Z-index ──────────────────────────────────────────────── */
  --mk-z-base:     0;
  --mk-z-dropdown: 1000;
  --mk-z-sticky:   1100;
  --mk-z-modal:    1300;
  --mk-z-toast:    1400;
  --mk-z-tooltip:  1500;
}