/* ════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — Laugh Challenge Web
   Single source of truth for responsive sizing across all pages.

   Rules:
   1. Never write clamp() directly in a page stylesheet — use var(--ds-*).
   2. To resize something app-wide, edit ONE token here.
   3. 4K override is automatic via @media (min-width: 2200px) below.
   4. When porting to Flutter, these tokens map to AppDimensions constants.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Typography ───────────────────────────────────────────────── */
  --ds-font-page-title: clamp(20px, 1.7vw, 36px);        /* "المتصدرين", "اختر التحدي" */
  --ds-font-section-head: clamp(14px, 1.15vw, 18px);     /* "المنافسون", "قبل أن تلعب" */
  --ds-font-card-title: clamp(15px, 1.2vw, 20px);        /* card titles */
  --ds-font-body: clamp(18px, 1vw, 15px);                /* default body text */
  --ds-font-body-sm: clamp(11px, 0.9vw, 13px);           /* secondary / meta text */
  --ds-font-label: clamp(10px, 0.85vw, 12px);            /* tiny labels, captions */
  --ds-font-number-lg: clamp(16px, 1.4vw, 22px);         /* big stats, XP, rank */
  --ds-font-number-md: clamp(13px, 1.1vw, 16px);         /* medium stats */

  /* ── Buttons ──────────────────────────────────────────────────── */
  --ds-btn-close: clamp(44px, 3vw, 64px);                /* red-close, header X */
  --ds-btn-close-icon: clamp(20px, 1.5vw, 28px);
  --ds-btn-icon: clamp(40px, 2.8vw, 60px);               /* settings, notif, hof */
  --ds-btn-icon-svg: clamp(22px, 1.8vw, 32px);
  --ds-btn-primary-h: clamp(44px, 3.2vw, 60px);          /* primary CTAs */
  --ds-btn-primary-font: clamp(14px, 1.2vw, 18px);

  /* ── Avatars ──────────────────────────────────────────────────── */
  --ds-avatar-sm: clamp(32px, 2.6vw, 42px);              /* row avatars, own card */
  --ds-avatar-md: clamp(44px, 3.6vw, 58px);              /* podium silver/bronze */
  --ds-avatar-lg: clamp(52px, 4.4vw, 70px);              /* podium gold, hero */
  --ds-avatar-xl: clamp(64px, 5.5vw, 88px);              /* full profile */

  /* ── Cards ────────────────────────────────────────────────────── */
  --ds-card-radius: clamp(14px, 1.2vw, 22px);
  --ds-card-radius-lg: clamp(18px, 1.6vw, 28px);         /* hero cards */
  --ds-card-pad-sm: clamp(8px, 0.7vw, 12px) clamp(12px, 1vw, 18px);
  --ds-card-pad-md: clamp(12px, 1vw, 18px) clamp(16px, 1.4vw, 24px);
  --ds-card-pad-lg: clamp(16px, 2vw, 54px) clamp(50px, 2vw, 30px);
  --ds-card-border-w: 1.5px;

  /* ── Pills / Chips ────────────────────────────────────────────── */
  --ds-pill-pad: clamp(5px, 0.5vw, 9px) clamp(12px, 1vw, 18px);
  --ds-pill-font: clamp(11px, 0.95vw, 14px);
  --ds-pill-radius: 999px;

  /* ── Spacing ──────────────────────────────────────────────────── */
  --ds-gap-xs: clamp(4px, 0.4vw, 7px);
  --ds-gap-sm: clamp(6px, 0.5vw, 10px);
  --ds-gap-md: clamp(10px, 1vw, 16px);
  --ds-gap-lg: clamp(16px, 1.4vw, 24px);
  --ds-gap-xl: clamp(22px, 2vw, 36px);

  /* ── Padding (component-level) ────────────────────────────────── */
  --ds-pad-x: clamp(14px, 1.4vw, 28px);
  --ds-pad-y: clamp(10px, 0.9vw, 16px);
  --ds-pad-screen-x: clamp(18px, 1.8vw, 40px);
  --ds-pad-screen-y: clamp(10px, 0.9vw, 16px);

  /* ── Container widths ─────────────────────────────────────────── */
  --ds-container-max: min(100%, 1520px);
  --ds-content-max: min(100%, 1280px);
  --ds-column-max: min(100%, 840px);
  --ds-sidebar-w: clamp(260px, 22vw, 340px);

  /* ── Shadows ──────────────────────────────────────────────────── */
  --ds-shadow-sm: 0 3px 10px rgba(139, 105, 20, 0.12);
  --ds-shadow-md: 0 6px 18px rgba(139, 105, 20, 0.18);
  --ds-shadow-lg: 0 12px 32px rgba(139, 105, 20, 0.25);
  --ds-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ── Colors (common ones used across pages) ──────────────────── */
  --ds-gold: #c49b3c;
  --ds-gold-dark: #8b6914;
  --ds-gold-light: #ffd97a;
  --ds-cream: #fcf3d4;
  --ds-cream-card: #fffbef;
  --ds-text: #3d2e1a;
  --ds-text-muted: #8b6914;
  --ds-red: #e94b5a;
  --ds-red-dark: #b83a47;
  --ds-green: #3caa50;
  --ds-green-dark: #1f5e2a;
  --ds-green-bright: #5dcf72;
  --ds-green-mid: #4ab860;
  --ds-green-deep: #2e7d32;
  --ds-green-success: #4caf50;
  --ds-blue: #3498db;
  --ds-orange: #f5875f;
  --ds-text-dark: #3a2810;
  --ds-text-rich: #4a3518;
  --ds-cream-warm: #fffbea;
  --ds-cream-light: #fff5d9;
  --ds-gold-soft: #f5d780;
  --ds-gold-rich: #e5c97d;
  --ds-border-warm: #C4B99A;
  --ds-gold-medium: #e2b04a;
  --ds-text-soft: #5a4930;
  --ds-text-warm: #6a4f1c;
  --ds-text-mid: #5a3f0d;
  --ds-red-deep: #c0392b;
  --ds-red-bright: #f44336;
  --ds-red-vivid: #e74c3c;
  --ds-red-strong: #ef4444;
  --ds-cream-bg: #fff8eb;
  --ds-cream-soft: #fff4d0;
  --ds-green-glow: #5bc16c;
  --ds-green-light: #3da84e;
  --ds-green-pine: #2f7d3a;
  --ds-green-forest: #2d8a3e;
  --ds-orange-warm: #f39c12;
  --ds-text-deep: #7a5e25;
  --ds-gold-bright: #ffd97a;
  --ds-gold-warm: #d6ac4e;
  --ds-purple-soft: #cfa9ea;
  --ds-red-blood: #b53544;
  --ds-text-tan: #8A7A60;
  --ds-green-pine-dark: #3a9648;
  --ds-dark-blue: #1a1a2e;
  --ds-cream-pale: #fff5d0;
  --ds-gold-pale: #ffe8a0;
  --ds-orange-bright: #f0a73c;
  --ds-purple-deep: #7a4db1;
  --ds-text-tan-light: #8a7a5a;
  --ds-green-deep-dark: #1f5e2a;
  --ds-cream-vanilla: #fff5d3;
  --ds-gold-cream: #ffe9a8;
  --ds-gold-warm-light: #ffe28a;
  --ds-gold-honey: #ffd36e;
  --ds-cream-yellow: #faf5e4;
  --ds-cream-tan: #f5ecd7;
  --ds-purple-light: #e4cef8;
  --ds-text-light: #d4c5a9;
  --ds-gold-rich-dark: #d4a93e;
  --ds-orange-rust: #c96a45;
  --ds-gold-amber: #bf8a2d;
  --ds-gold-bronze: #956c13;
  --ds-text-stone: #8b7452;
  --ds-text-warm-mid: #7a6a53;
  --ds-text-bronze: #6e5832;
  --ds-purple-blue: #6c5ce7;
  --ds-text-charcoal: #2C2C2C;
  --ds-cream-pure: #fffbef;
  --ds-cream-yolk: #fff8d4;
  --ds-cream-rich: #fff7c4;
  --ds-gold-pale-light: #ffe0a2;
  --ds-yellow-pure: #ffd700;
  --ds-gold-light-warm: #ffc168;
  --ds-cream-fdf: #fdf8e8;
  --ds-cream-shell: #f8f2de;
  --ds-purple-mist: #f2e8ff;
  --ds-cream-deep: #f1e6cb;
  --ds-cream-tan-dark: #efe4ca;
  --ds-cream-warm-dark: #e8dcc0;
  --ds-green-mint-pale: #e7f7eb;
  --ds-orange-amber: #e68a00;
  --ds-gold-tan: #d4a24e;
  --ds-green-mint-mid: #b9dea6;
  --ds-gold-deep-bronze: #a67e1f;
  --ds-green-mint-light: #a0e1aa;
  --ds-cream-bg-deep: #F0E6C8;
  --ds-cream-bg-mid: #EFEAD8;
  --ds-green-pale: #9be6a6;
  --ds-purple-violet: #9b59b6;
  --ds-text-tan-mid: #9a8560;
  --ds-gold-deep: #8f6c22;
  --ds-red-burgundy: #8b1a1a;
  --ds-purple-vivid: #7c3aed;
  --ds-purple-dark-vivid: #6a2d8a;
  --ds-green-emerald: #66c777;
  --ds-green-fresh: #66BB6A;
  --ds-text-coffee: #4e342e;

  /* Transitions */
  --ds-tr-fast: .12s ease;
  --ds-tr: .15s ease;
  --ds-tr-mid: .2s ease;
  --ds-tr-slow: .3s ease;
  --ds-tr-bounce: .15s cubic-bezier(.34,1.56,.64,1);

  /* Border widths */
  --ds-bw: 1px;
  --ds-bw-mid: 1.5px;
  --ds-bw-thick: 2px;
  --ds-bw-bold: 2.5px;
  --ds-bw-heavy: 3px;
  --ds-bw-massive: 4px;

  /* Font weights */
  --ds-fw-normal: 400;
  --ds-fw-medium: 500;
  --ds-fw-semibold: 600;
  --ds-fw-bold: 700;
  --ds-fw-heavy: 800;
  --ds-fw-black: 900;

  /* Line heights */
  --ds-lh-tight: 1;
  --ds-lh-snug: 1.2;
  --ds-lh-normal: 1.4;
  --ds-lh-loose: 1.6;

  /* Black overlays/shadows alpha */
  --ds-shade-5: rgba(0,0,0,0.05);
  --ds-shade-6: rgba(0,0,0,0.06);
  --ds-shade-1: rgba(0,0,0,0.1);
  --ds-shade-15: rgba(0,0,0,0.15);
  --ds-shade-18: rgba(0,0,0,0.18);
  --ds-shade-2: rgba(0,0,0,0.2);
  --ds-shade-25: rgba(0,0,0,0.25);
  --ds-shade-3: rgba(0,0,0,0.3);
  --ds-shade-4: rgba(0,0,0,0.4);
  --ds-shade-5x: rgba(0,0,0,0.5);

  /* White overlays alpha */
  --ds-tint-08: rgba(255,255,255,0.08);
  --ds-tint-1: rgba(255,255,255,0.1);
  --ds-tint-15: rgba(255,255,255,0.15);
  --ds-tint-3: rgba(255,255,255,0.3);
  --ds-tint-4: rgba(255,255,255,0.4);
  --ds-tint-5: rgba(255,255,255,0.5);
  --ds-tint-55: rgba(255,255,255,0.55);
  --ds-tint-6: rgba(255,255,255,0.6);
  --ds-tint-65: rgba(255,255,255,0.65);
  --ds-tint-7: rgba(255,255,255,0.7);
  --ds-tint-75: rgba(255,255,255,0.75);
  --ds-tint-8: rgba(255,255,255,0.8);
  --ds-tint-82: rgba(255,255,255,0.82);
  --ds-tint-85: rgba(255,255,255,0.85);
  --ds-tint-9: rgba(255,255,255,0.9);
  --ds-tint-92: rgba(255,255,255,0.92);

  /* Pure tones */
  --ds-white: #fff;
  --ds-black: #000;
  --ds-near-black: #111;
  --ds-gray-light: #ccc;
  --ds-gray: #aaa;
  --ds-gray-dark: #999;
  --ds-gray-darker: #888;

  /* Letter spacing */
  --ds-ls-tight: 0.2px;
  --ds-ls-mid: 0.3px;
  --ds-ls-wide: 1px;

  /* Opacity */
  --ds-op-3: 0.3;
  --ds-op-4: 0.4;
  --ds-op-5: 0.5;
  --ds-op-55: 0.55;
  --ds-op-6: 0.6;
  --ds-op-7: 0.7;
  --ds-op-8: 0.8;

  /* Z-index layers */
  --ds-z-base: 1;
  --ds-z-content: 2;
  --ds-z-overlay: 10;
  --ds-z-modal: 100;
  --ds-z-toast: 200;
  --ds-z-top: 99999;

  /* Gold alpha (rgba 196,155,60) */
  --ds-gold-15: rgba(196,155,60,0.15);
  --ds-gold-2: rgba(196,155,60,0.2);
  --ds-gold-25: rgba(196,155,60,0.25);
  --ds-gold-3: rgba(196,155,60,0.3);
  --ds-gold-35: rgba(196,155,60,0.35);
  --ds-gold-4: rgba(196,155,60,0.4);
  --ds-gold-45: rgba(196,155,60,0.45);
  --ds-gold-5: rgba(196,155,60,0.5);
  --ds-gold-55: rgba(196,155,60,0.55);

  /* Green success alpha (76,175,80) */
  --ds-green-suc-15: rgba(76,175,80,0.15);
  --ds-green-suc-22: rgba(76,175,80,0.22);
  --ds-green-suc-3: rgba(76,175,80,0.3);
  --ds-green-suc-35: rgba(76,175,80,0.35);
  --ds-green-suc-4: rgba(76,175,80,0.4);
  --ds-green-suc-55: rgba(76,175,80,0.55);

  /* Red vivid alpha (231,76,60) and red-bright (244,67,54) */
  --ds-red-viv-1: rgba(231,76,60,0.1);
  --ds-red-bri-15: rgba(244,67,54,0.15);
  --ds-red-bri-3: rgba(244,67,54,0.3);

  /* Red app alpha (233,75,90) */
  --ds-red-app-3: rgba(233,75,90,0.3);

  /* Blue alpha (52,152,219) */
  --ds-blue-1: rgba(52,152,219,0.1);
}

/* ════════════════════════════════════════════════════════════════════
   4K OVERRIDE (≥ 2200px)
   Scales all size tokens ~60-80% larger to fill 4K viewports.
   Typography gains are smaller since text readability saturates faster.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 2200px) {
  :root {
    /* Typography — modest jumps */
    --ds-font-page-title: 58px;
    --ds-font-section-head: 24px;
    --ds-font-card-title: 28px;
    --ds-font-body: 18px;
    --ds-font-body-sm: 16px;
    --ds-font-label: 14px;
    --ds-font-number-lg: 34px;
    --ds-font-number-md: 22px;

    /* Buttons */
    --ds-btn-close: 80px;
    --ds-btn-close-icon: 36px;
    --ds-btn-icon: 76px;
    --ds-btn-icon-svg: 42px;
    --ds-btn-primary-h: 76px;
    --ds-btn-primary-font: 24px;

    /* Avatars */
    --ds-avatar-sm: 58px;
    --ds-avatar-md: 82px;
    --ds-avatar-lg: 100px;
    --ds-avatar-xl: 120px;

    /* Cards */
    --ds-card-radius: 28px;
    --ds-card-radius-lg: 36px;
    --ds-card-pad-sm: 16px 24px;
    --ds-card-pad-md: 22px 32px;
    --ds-card-pad-lg: 30px 44px;
    --ds-card-border-w: 2px;

    /* Pills */
    --ds-pill-pad: 12px 24px;
    --ds-pill-font: 20px;

    /* Spacing */
    --ds-gap-xs: 10px;
    --ds-gap-sm: 14px;
    --ds-gap-md: 22px;
    --ds-gap-lg: 34px;
    --ds-gap-xl: 50px;

    /* Padding */
    --ds-pad-x: 40px;
    --ds-pad-y: 24px;
    --ds-pad-screen-x: 60px;
    --ds-pad-screen-y: 20px;

    /* Containers */
    --ds-container-max: min(100%, 2200px);
    --ds-content-max: min(100%, 1900px);
    --ds-column-max: min(100%, 1400px);
    --ds-sidebar-w: clamp(420px, 19vw, 540px);
  }
}