/* ==========================================================================
   Learning With Badri — Design Tokens
   Satu sumber kebenaran untuk spacing, layout, radius, warna, dan typography.
   Komponen TIDAK boleh memakai angka langsung; selalu pakai token di bawah.
   Breakpoint: mobile < 640px · tablet 640–1023px · desktop 1024px+ · large 1280px+
   ========================================================================== */

:root {
  /* 1. Spacing scale — basis 4px ------------------------------------------ */
  --space-0: 0px;
  --space-1: 4px;    /* fine alignment, icon adjustment */
  --space-2: 8px;    /* icon + text, badge internal, small gap */
  --space-3: 12px;   /* input internal, compact list */
  --space-4: 16px;   /* default component spacing, card content */
  --space-5: 20px;
  --space-6: 24px;   /* card sections, widget spacing */
  --space-7: 28px;
  --space-8: 32px;   /* major content groups */
  --space-10: 40px;
  --space-12: 48px;  /* large section separation */
  --space-14: 56px;
  --space-16: 64px;  /* dashboard section spacing */
  --space-20: 80px;  /* landing / hero */
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;

  /* 2. Layout container --------------------------------------------------- */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;

  --page-padding: var(--space-4);          /* mobile 16 → tablet 24 → desktop 32 */
  --prose-width: 68ch;                     /* 65–75 karakter per baris */

  /* 3. Section spacing ---------------------------------------------------- */
  --section-spacing-sm: var(--space-16);   /* 64 */
  --section-spacing-md: var(--space-20);   /* 80 */
  --section-spacing-lg: var(--space-28);   /* 112 */
  --section-padding: var(--space-16);      /* mobile 64 → desktop 96 */
  --hero-padding-top: var(--space-16);     /* desktop 80 */
  --hero-padding-bottom: var(--space-16);  /* desktop 96 */

  /* 4. Grid & gap --------------------------------------------------------- */
  --gap-dashboard: var(--space-4);         /* mobile 16 → desktop 24 */
  --gap-card-grid: var(--space-6);
  --gap-dense: var(--space-4);
  --gap-feature: var(--space-8);
  --gap-section: var(--space-8);           /* mobile 32 → desktop 48 */

  /* 5. Card spacing ------------------------------------------------------- */
  --card-padding: var(--space-4);          /* mobile 16 → tablet+ 24 */
  --card-padding-lg: var(--space-8);
  --card-padding-compact: var(--space-4);

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

  /* Warna — tema gelap mengikuti template hero (Lithos):
     hitam + gambar batuan · teks putih · kaca transparan · aksen oranye ---- */
  color-scheme: dark;

  --color-primary: #e8702a;                    /* oranye tombol "Start Digging" */
  --color-primary-hover: #d2611f;
  --color-primary-soft: rgba(232, 112, 42, 0.16);
  --color-primary-border: rgba(232, 112, 42, 0.45);

  --color-success: #34d399;
  --color-success-strong: #6ee7b7;
  --color-success-soft: rgba(52, 211, 153, 0.14);
  --color-success-border: rgba(52, 211, 153, 0.4);

  --color-danger: #f87171;
  --color-danger-soft: rgba(248, 113, 113, 0.14);
  --color-danger-border: rgba(248, 113, 113, 0.4);

  --color-warning: #fbbf24;
  --color-warning-soft: rgba(251, 191, 36, 0.14);

  --color-bg: #000000;
  --color-surface: rgba(255, 255, 255, 0.07);   /* kaca, seperti pill menu template */
  --color-surface-muted: rgba(255, 255, 255, 0.04);
  --color-surface-solid: #141414;               /* untuk menu & elemen yang harus tidak tembus */
  --color-border: rgba(255, 255, 255, 0.14);
  --color-border-strong: rgba(255, 255, 255, 0.3);

  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.8);  /* text-white/80 di template */
  --color-text-tertiary: rgba(255, 255, 255, 0.55);
  --color-text-on-primary: #ffffff;

  --glass-blur: blur(12px);                      /* backdrop-blur-md */

  --bg-image: url('https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260609_195923_b0ba8ace-1d1d-4f2c-9a28-1ab84b330680.png&w=1280&q=85');

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.55);

  --focus-ring: 0 0 0 3px rgba(232, 112, 42, 0.4);

  /* 7. Font family — sama dengan template ---------------------------------- */
  --font-ui: "Inter", sans-serif;                    /* teks & UI */
  --font-display: "Playfair Display", serif;         /* judul besar, miring */
  --font-heading: "Inter", sans-serif;               /* angka, judul kartu, soal */
  --tracking-ui: -0.02em;                            /* tracking-[-0.02em] */

  /* 8. Font size scale ---------------------------------------------------- */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;
  --text-6xl: 60px;
  --text-7xl: 72px;

  /* 11. Font weight ------------------------------------------------------- */
  --weight-regular: 400;   /* body */
  --weight-medium: 500;    /* navigation / label */
  --weight-semibold: 600;  /* card title / button */
  --weight-bold: 700;      /* heading / important number */

  /* 10. Semantic typography ------------------------------------------------ */
  --type-display-size: 40px;                       /* mobile; desktop di bawah */
  --type-display-line: 1.1;
  --type-display-weight: var(--weight-bold);
  --type-display-letter-spacing: -0.04em;

  --type-h1-size: var(--text-4xl);                 /* mobile 36 → desktop 48 */
  --type-h1-line: 1.1;
  --type-h1-weight: var(--weight-bold);
  --type-h1-letter-spacing: -0.03em;

  --type-h2-size: 28px;                            /* mobile 28 → desktop 36 */
  --type-h2-line: 1.2;
  --type-h2-weight: var(--weight-bold);
  --type-h2-letter-spacing: -0.025em;

  --type-h3-size: var(--text-2xl);
  --type-h3-line: 1.3;
  --type-h3-weight: 600;
  --type-h3-letter-spacing: -0.015em;

  --type-h4-size: var(--text-xl);
  --type-h4-line: 1.4;
  --type-h4-weight: var(--weight-semibold);

  --type-body-lg-size: var(--text-lg);
  --type-body-lg-line: 1.6;
  --type-body-lg-weight: var(--weight-regular);

  --type-body-size: var(--text-md);
  --type-body-line: 1.6;
  --type-body-weight: var(--weight-regular);

  --type-body-sm-size: var(--text-sm);
  --type-body-sm-line: 1.5;
  --type-body-sm-weight: var(--weight-regular);

  --type-caption-size: var(--text-xs);
  --type-caption-line: 1.4;
  --type-caption-weight: var(--weight-medium);
  --type-caption-letter-spacing: 0.01em;

  /* 12. Dashboard typography ---------------------------------------------- */
  --type-greeting-size: var(--text-3xl);
  --type-page-title-size: var(--text-3xl);         /* 30 → 36 */
  --type-card-title-size: var(--text-lg);          /* 18 → 20 */
  --type-stat-size: var(--text-3xl);               /* 30 → 36 */
  --type-stat-label-size: var(--text-sm);

  /* 13. Game typography --------------------------------------------------- */
  --type-question-size: var(--text-2xl);           /* mobile 24 → 28–36 */
  --type-question-line: 1.25;
  --type-answer-size: var(--text-md);
  --type-xp-size: var(--text-xl);
  --type-level-size: 40px;

  /* 14. Landing typography ------------------------------------------------ */
  --type-hero-subtitle-size: var(--text-lg);       /* 18 → 20 */

  /* 19. Button ------------------------------------------------------------ */
  --button-sm: 36px;
  --button-md: 44px;
  --button-lg: 52px;
  --button-padding-x: 20px;
  --button-font-size: var(--text-sm);
  --button-lg-font-size: var(--text-md);

  /* 20. Form -------------------------------------------------------------- */
  --type-label-size: var(--text-sm);
  --type-input-size: var(--text-md);
  --type-helper-size: var(--text-sm);
  --type-error-size: 13px;
  --input-height: var(--button-md);

  /* Motion ---------------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration: 160ms;
}

/* Tablet 640–1023px */
@media (min-width: 640px) {
  :root {
    --page-padding: var(--space-6);
    --card-padding: var(--space-6);
    --section-padding: var(--space-20);
    --hero-padding-top: var(--space-16);
    --hero-padding-bottom: var(--space-20);

    --type-display-size: clamp(48px, 6vw, 72px);
    --type-display-line: 1.05;
    --type-h1-size: clamp(36px, 4.5vw, 48px);
    --type-h2-size: clamp(30px, 3.6vw, 36px);
    --type-question-size: 28px;
    --type-page-title-size: clamp(30px, 3vw, 36px);
  }
}

/* Desktop 1024px+ */
@media (min-width: 1024px) {
  :root {
    --page-padding: var(--space-8);
    --section-padding: var(--space-24);
    --hero-padding-top: var(--space-20);
    --hero-padding-bottom: var(--space-24);

    --gap-dashboard: var(--space-6);
    --gap-section: var(--space-12);

    --type-card-title-size: var(--text-xl);
    --type-stat-size: var(--text-4xl);
    --type-question-size: clamp(28px, 2.6vw, 36px);
    --type-hero-subtitle-size: var(--text-xl);
  }
}