/* ============================================================
   TOKENS.CSS — Design System Variables
   KKN Digital Journal "JEJAK"
   ============================================================ */

:root {

  /* ── COLORS: Light Mode (default) ──────────────────────── */

  /* Background */
  --bg-primary:      #F5F0E8;   /* krem hangat — kertas tua */
  --bg-secondary:    #EDE8DB;   /* sedikit lebih gelap */
  --bg-surface:      #FDFAF4;   /* putih susu — card */
  --bg-dark:         #1A1612;   /* coklat gelap — section malam */
  --bg-dark-surface: #241F1A;   /* sedikit lebih terang */

  /* Text */
  --text-primary:    #1C1917;   /* hitam kecoklatan */
  --text-secondary:  #57534E;   /* abu-abu hangat */
  --text-subtle:     #A8A29E;   /* caption, label */
  --text-on-dark:    #F5F0E8;   /* teks di atas bg gelap */
  --text-on-dark-subtle: #A8A29E;

  /* Accent */
  --accent-sage:     #6B8F71;   /* hijau sage — warna padi */
  --accent-sage-light: #8FB896; /* sage lebih terang (dark bg) */
  --accent-earth:    #C4884A;   /* oranye tanah — senja */
  --accent-gold:     #D4A853;   /* kuning emas — kebahagiaan */
  --accent-sage-muted: #4A6B50; /* sage lebih gelap */

  /* Border / Divider */
  --border-light:    #D6CFBD;
  --border-medium:   #C5BBA8;

  /* Overlay */
  --overlay-dark:    rgba(26, 22, 18, 0.6);
  --overlay-darker:  rgba(26, 22, 18, 0.82);
  --overlay-hero:    linear-gradient(
                       to bottom,
                       rgba(26, 22, 18, 0.10) 0%,
                       rgba(26, 22, 18, 0.25) 50%,
                       rgba(26, 22, 18, 0.75) 100%
                     );

  /* ── TYPOGRAPHY ─────────────────────────────────────────── */

  --font-display:    'Playfair Display', Georgia, serif;
  --font-body:       'Lora', Georgia, serif;
  --font-ui:         'Inter', system-ui, sans-serif;
  --font-accent:     'Cormorant Garamond', Georgia, serif;

  /* Size Scale */
  --text-xs:         0.75rem;    /* 12px */
  --text-sm:         0.875rem;   /* 14px */
  --text-base:       1rem;       /* 16px */
  --text-md:         1.0625rem;  /* 17px */
  --text-lg:         1.125rem;   /* 18px */
  --text-xl:         1.25rem;    /* 20px */
  --text-2xl:        1.5rem;     /* 24px */
  --text-3xl:        1.875rem;   /* 30px */
  --text-4xl:        2.25rem;    /* 36px */
  --text-5xl:        3rem;       /* 48px */
  --text-6xl:        3.75rem;    /* 60px */
  --text-7xl:        4.5rem;     /* 72px */
  --text-8xl:        6rem;       /* 96px */
  --text-9xl:        8rem;       /* 128px */

  /* Line Height */
  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;
  --leading-loose:   2.0;

  /* Letter Spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.2em;

  /* ── SPACING (8px base) ─────────────────────────────────── */

  --space-1:    0.25rem;   /*  4px */
  --space-2:    0.5rem;    /*  8px */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */
  --space-32:   8rem;      /* 128px */
  --space-40:   10rem;     /* 160px */
  --space-48:   12rem;     /* 192px */

  /* Section Padding */
  --section-py-sm:  var(--space-16);   /* 64px  — mobile */
  --section-py-md:  var(--space-24);   /* 96px  — tablet */
  --section-py-lg:  var(--space-32);   /* 128px — desktop */

  /* ── LAYOUT ─────────────────────────────────────────────── */

  --max-width:       1280px;
  --max-width-prose: 720px;
  --max-width-narrow: 560px;

  --px-mobile:  var(--space-5);   /* 20px */
  --px-tablet:  var(--space-10);  /* 40px */
  --px-desktop: var(--space-20);  /* 80px */

  /* ── BORDER RADIUS ──────────────────────────────────────── */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── SHADOWS ─────────────────────────────────────────────── */

  --shadow-sm:   0 1px 3px rgba(28, 25, 23, 0.08),
                 0 1px 2px rgba(28, 25, 23, 0.06);
  --shadow-md:   0 4px 12px rgba(28, 25, 23, 0.10),
                 0 2px 6px  rgba(28, 25, 23, 0.06);
  --shadow-lg:   0 10px 30px rgba(28, 25, 23, 0.12),
                 0 4px 12px rgba(28, 25, 23, 0.08);
  --shadow-xl:   0 20px 50px rgba(28, 25, 23, 0.16),
                 0 8px 20px rgba(28, 25, 23, 0.10);

  /* ── ANIMATION TIMING ───────────────────────────────────── */

  --ease-out:    cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;
  --duration-slower: 900ms;
  --duration-reveal: 700ms;

  /* ── Z-INDEX ─────────────────────────────────────────────── */

  --z-base:       0;
  --z-above:      10;
  --z-nav:        100;
  --z-overlay:    200;
  --z-modal:      300;
  --z-cursor:     400;
  --z-top:        999;
}