/* ═══════════════════════════════════════════════════════════════════════════
   src/tokens.css  —  Design Token System
   Semua nilai dasar didefinisikan di sini sebagai CSS Custom Properties.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────────
   :root  →  CSS custom properties standar, langsung jalan di browser
   tanpa build step apa pun.

   Catatan: jika nanti proyek ini di-setup dengan Tailwind v4, selector
   ":root" di bawah bisa diganti/didampingi "@theme { ... }" supaya token
   yang sama otomatis terdaftar sebagai utility class Tailwind
   (--color-primary → bg-primary, text-primary, border-primary, dst).
   Sampai saat itu, :root adalah cara paling benar dan portable untuk
   memuat token ini di plain HTML/PHP seperti index.php dan semua halaman
   komponen di components/**.php.
   ────────────────────────────────────────────────────────────────────────── */
:root {

  /* ══════════════════════════════════════════════════════════════════════════
     1. WARNA
     ══════════════════════════════════════════════════════════════════════════ */

  /* ── 1a. Bright Theme (teks untuk background terang) ─────────────────── */
  --color-primary:         #18181B;   /* zinc-900 */
  --color-secondary:       #52525B;   /* zinc-600 */
  --color-tertiary:        #71717A;   /* zinc-500 */

  /* ── 1b. Dark Theme (teks untuk background gelap) ────────────────────── */
  --color-primary-dark:    #FAFAFA;   /* zinc-50 */
  --color-secondary-dark:  #D4D4D8;   /* zinc-300 */
  --color-tertiary-dark:   #A1A1AA;   /* zinc-400 */

  /* ── 1c. Dark Accent  (8 — medium ke gelap, untuk UI gelap) ─────────── */
  --color-accent-d1:       #020617;   /* blue-black      */
  --color-accent-d2:       #082F49;   /* cyan-950        */
  --color-accent-d3:       #0C4A6E;   /* sky-900         */
  --color-accent-d4:       #172554;   /* blue-950        */
  --color-accent-d5:       #1E3A8A;   /* blue-900        */
  --color-accent-d6:       #1E40AF;   /* blue-800        */
  --color-accent-d7:       #1D4ED8;   /* blue-700        */
  --color-accent-d8:       #2563EB;   /* blue-600        */

  /* ── 1d. Bright Accent  (8 — vivid, high-saturation) ────────────────── */
  --color-accent-b1:       #3B82F6;   /* blue-500        */
  --color-accent-b2:       #60A5FA;   /* blue-400        */
  --color-accent-b3:       #38BDF8;   /* sky-400         */
  --color-accent-b4:       #0EA5E9;   /* sky-500         */
  --color-accent-b5:       #22D3EE;   /* cyan-400        */
  --color-accent-b6:       #67E8F9;   /* cyan-300        */
  --color-accent-b7:       #7DD3FC;   /* sky-300         */
  --color-accent-b8:       #BAE6FD;   /* sky-200         */

  /* ── 1e. Dark Background  (100% dark → 80% dark) ────────────────────── */
  --color-bg-d1:           #000000;   /* 100% dark */
  --color-bg-d2:           #0A0A0A;   /* 96% dark  */
  --color-bg-d3:           #141414;   /* 92% dark  */
  --color-bg-d4:           #1F1F1F;   /* 88% dark  */
  --color-bg-d5:           #292929;   /* 84% dark  */
  --color-bg-d6:           #333333;   /* 80% dark  */

  /* ── 1f. Bright Background  (100% light → 80% light) ────────────────── */
  --color-bg-b1:           #FFFFFF;   /* 100% light */
  --color-bg-b2:           #F5F5F5;   /* 96% light  */
  --color-bg-b3:           #EBEBEB;   /* 92% light  */
  --color-bg-b4:           #E0E0E0;   /* 88% light  */
  --color-bg-b5:           #D6D6D6;   /* 84% light  */
  --color-bg-b6:           #CCCCCC;   /* 80% light  */

  /* ── Warna Semantik ──────────────────────────────────────────────────── */
  --color-success:         #22C55E;   /* green-500   */
  --color-warning:         #EAB308;   /* yellow-500  */
  --color-error:           #EF4444;   /* red-500     */
  --color-info:            #3B82F6;   /* blue-500    */

  /* ══════════════════════════════════════════════════════════════════════════
     2. TIPOGRAFI  —  Font Family
     ══════════════════════════════════════════════════════════════════════════ */

  /* Peran masing-masing font:
     display  → H1, H2, H3, blockquote besar (berkarakter, editorial)
     sans     → H4, H5, H6, label, button, navigasi, UI teks
     body     → paragraf, list, helper text, general content
     mono     → kode, kbd, pre, terminal output                             */

  --font-display:    "Inter", system-ui, sans-serif;
  --font-sans:       "DM Sans", system-ui, sans-serif;
  --font-body:       "Inter", system-ui, sans-serif;
  --font-serif:      "DM Serif Display", Georgia, serif;
  --font-mono:       "JetBrains Mono", Menlo, monospace;
  --font-brand:      "Space Grotesk", sans-serif;
  --font-emoji:      "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --font-accent:     "Pacifico", cursive;
  --font-decorative: "Playfair Display", serif;
  --font-script:     "Great Vibes", cursive;

  /* ══════════════════════════════════════════════════════════════════════════
     3. UKURAN FONT
     Skala modular ratio 1.25 (Major Third). Base: 1rem = 16px.
     Semua heading menggunakan clamp() untuk fluid typography.
     ══════════════════════════════════════════════════════════════════════════ */

  /* ── Heading H1 – H6 ────────────────────────────────────────────────── */
  --text-h1:            clamp(2.25rem, 5vw, 3.815rem);   /* 36px → 61px    */
  --text-h2:            clamp(1.875rem, 4vw, 3.052rem);  /* 30px → 49px    */
  --text-h3:            clamp(1.5rem,  3vw, 2.441rem);   /* 24px → 39px    */
  --text-h4:            clamp(1.25rem, 2.5vw, 1.953rem); /* 20px → 31px    */
  --text-h5:            clamp(1.125rem, 2vw, 1.563rem);  /* 18px → 25px    */
  --text-h6:            clamp(1rem,    1.5vw, 1.25rem);  /* 16px → 20px    */

  /* ── Body Text ──────────────────────────────────────────────────────── */
  --text-body-xl:       1.25rem;    /* 20px  —  intro / hero subtitle      */
  --text-body-lg:       1.125rem;   /* 18px  —  lead / intro paragraph     */
  --text-body:          1rem;       /* 16px  —  default body               */
  --text-body-sm:       0.875rem;   /* 14px  —  secondary / helper         */
  --text-body-xs:       0.8125rem;  /* 13px  —  compact UI, labels kecil   */

  /* ── Blockquote ─────────────────────────────────────────────────────── */
  --text-blockquote:    clamp(1.25rem, 2vw, 1.5rem);     /* 20px → 24px    */

  /* ── Caption & Overline ─────────────────────────────────────────────── */
  --text-caption:       0.75rem;    /* 12px  */
  --text-overline:      0.6875rem;  /* 11px  */
  --text-xs:            0.625rem;   /* 10px  —  micro labels, tags, badges */

  /* ── Code / Mono ────────────────────────────────────────────────────── */
  --text-code:          0.875rem;   /* 14px  */
  --text-code-sm:       0.8125rem;  /* 13px  */

  /* ══════════════════════════════════════════════════════════════════════════
     4. LINE HEIGHT
     ══════════════════════════════════════════════════════════════════════════ */

  --leading-h1:         1.1;
  --leading-h2:         1.15;
  --leading-h3:         1.2;
  --leading-h4:         1.3;
  --leading-h5:         1.35;
  --leading-h6:         1.4;
  --leading-body:       1.75;       /* longform readability                 */
  --leading-ui:         1.4;        /* form labels, buttons, compact UI     */
  --leading-code:       1.65;

  /* ══════════════════════════════════════════════════════════════════════════
     5. LETTER SPACING
     ══════════════════════════════════════════════════════════════════════════ */

  --tracking-display:   -0.03em;    /* H1 — tight untuk display font        */
  --tracking-h2:        -0.025em;
  --tracking-h3:        -0.02em;
  --tracking-body:       0;
  --tracking-overline:   0.1em;     /* spasi lebar untuk overline/label    */
  --tracking-code:      -0.01em;

  /* ══════════════════════════════════════════════════════════════════════════
     6. FONT WEIGHT
     ══════════════════════════════════════════════════════════════════════════ */

  --weight-display:     400;   /* DM Serif Display — regular sudah elegan  */
  --weight-heading-sans: 600;  /* DM Sans semibold untuk H4-H6             */
  --weight-body:        400;
  --weight-body-medium: 500;
  --weight-bold:        700;
  --weight-mono:        400;
  --weight-mono-bold:   600;

  /* ══════════════════════════════════════════════════════════════════════════
     7. SPACING / LAYOUT
     ══════════════════════════════════════════════════════════════════════════ */

  /* ── Wrapper / Container ────────────────────────────────────────────── */
  --width-wrapper:      1280px;     /* max-width konten utama               */
  --width-prose:        70ch;       /* lebar ideal kolom bacaan             */
  --width-medium:       1080px;      /* medium width                        */
  --width-narrow:       860px;      /* artikel, form, page pendek           */

  /* ── Gutter / Padding Inline ────────────────────────────────────────── */
  --spacing-gutter:     clamp(1rem, 5vw, 4rem);

  /* ── Section Vertical Rhythm ────────────────────────────────────────── */
  --spacing-section-y:  clamp(3rem, 8vw, 6rem);
  --spacing-section-gap: clamp(2rem, 5vw, 4rem);

  /* ── Grid ───────────────────────────────────────────────────────────── */
  --spacing-grid-gap:   clamp(1rem, 2vw, 1.5rem);

  /* ══════════════════════════════════════════════════════════════════════════
     8. BORDER RADIUS
     ══════════════════════════════════════════════════════════════════════════ */

  --radius-xs:   0.25rem;    /* 4px   — chip, tag kecil                    */
  --radius-sm:   0.375rem;   /* 6px   — input, badge                       */
  --radius-md:   0.75rem;    /* 12px  — card, button                       */
  --radius-lg:   1.25rem;    /* 20px  — modal, panel                       */
  --radius-xl:   2rem;       /* 32px  — kartu hero besar                   */
  --radius-full: 9999px;     /* pill / avatar                              */

  /* ══════════════════════════════════════════════════════════════════════════
     9. SHADOW
     ══════════════════════════════════════════════════════════════════════════ */

  --shadow-xs:   0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm:   0 1px 3px 0 rgb(0 0 0 / 0.08),   0 1px 2px -1px rgb(0 0 0 / 0.06);
  --shadow-md:   0 4px 16px -2px rgb(0 0 0 / 0.1), 0 2px 6px -2px rgb(0 0 0 / 0.07);
  --shadow-lg:   0 20px 40px -8px rgb(0 0 0 / 0.14), 0 8px 16px -4px rgb(0 0 0 / 0.08);
  --shadow-xl:   0 32px 64px -12px rgb(0 0 0 / 0.18);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.06);

  /* ══════════════════════════════════════════════════════════════════════════
     10. Z-INDEX
     ══════════════════════════════════════════════════════════════════════════ */

  --z-below:     -1;
  --z-base:       0;
  --z-raised:    10;
  --z-dropdown: 1000;
  --z-sticky:   1020;
  --z-fixed:    1030;
  --z-modal-bg: 1040;
  --z-modal:    1050;
  --z-popover:  1060;
  --z-toast:    1100;
  --z-tooltip:  1200;

  /* ══════════════════════════════════════════════════════════════════════════
     11. TRANSISI
     ══════════════════════════════════════════════════════════════════════════ */

  --duration-fast:    150ms;
  --duration-base:    250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;
  --easing-default:   cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in:        cubic-bezier(0.4, 0, 1, 1);
  --easing-out:       cubic-bezier(0, 0, 0.2, 1);
  --easing-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

}