/* ==========================================================================
   Daftar — design tokens
   Direction: black & white institutional, with a restrained saffron highlight
   (trust + tiranga touch). Not cream-ledger, not purple SaaS.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Mono paper */
  --paper:        oklch(98.5% 0.002 100);
  --paper-sunk:   oklch(94.5% 0.003 100);
  --paper-raised: oklch(100% 0 0);
  --paper-edge:   oklch(88% 0.004 100);

  /* Near-black ink */
  --ink:          oklch(12% 0.005 260);
  --ink-2:        oklch(32% 0.006 260);
  --ink-3:        oklch(48% 0.005 260);
  --ink-faint:    oklch(68% 0.004 260);

  --rule:         oklch(90% 0.004 100);
  --rule-soft:    oklch(93% 0.003 100);
  --margin-red:   oklch(48% 0.16 28);

  /* Sparse colour — saffron highlight only; indigo for authority accents */
  --saffron:      oklch(72% 0.14 62);
  --saffron-deep: oklch(58% 0.145 55);
  --indigo:       oklch(28% 0.06 260);
  --indigo-soft:  oklch(94% 0.01 260);
  --green:        oklch(42% 0.08 150);
  --green-soft:   oklch(93% 0.02 150);

  --bg:            var(--paper);
  --bg-card:       var(--paper-raised);
  --bg-sunk:       var(--paper-sunk);
  --border:        var(--paper-edge);
  --text:          var(--ink);
  --text-muted:    var(--ink-2);
  --text-faint:    var(--ink-3);
  --accent:        var(--ink);
  --accent-on:     oklch(99% 0 0);
  --place:         var(--ink);
  --highlight:     var(--saffron-deep);
  --focus:         var(--ink);

  --text-xs:    0.75rem;
  --text-sm:    0.8125rem;
  --text-base:  clamp(0.9375rem, 0.90rem + 0.18vw, 1.0625rem);
  --text-lg:    clamp(1.0625rem, 1.00rem + 0.30vw, 1.25rem);
  --text-xl:    clamp(1.25rem, 1.10rem + 0.70vw, 1.75rem);
  --text-2xl:   clamp(1.75rem, 1.40rem + 1.60vw, 2.75rem);
  --logo:       clamp(2.75rem, 2.00rem + 3.40vw, 5rem);

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-section: clamp(3rem, 2rem + 4vw, 6rem);

  --measure:   68ch;
  --page-max:  1280px;

  --radius-tile: 4px;
  --radius-card: 12px;
  --radius-pill: 999px;

  --shadow-page:  0 1px 2px oklch(0% 0 0 / 0.06),
                  0 12px 32px -16px oklch(0% 0 0 / 0.18);
  --shadow-lift:  0 2px 4px oklch(0% 0 0 / 0.08),
                  0 18px 40px -18px oklch(0% 0 0 / 0.28);

  --dur-fast:   140ms;
  --dur-normal: 260ms;
  --dur-slow:   480ms;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        oklch(12% 0.004 260);
    --paper-sunk:   oklch(9% 0.004 260);
    --paper-raised: oklch(16% 0.005 260);
    --paper-edge:   oklch(28% 0.006 260);
    --ink:          oklch(96% 0.002 100);
    --ink-2:        oklch(78% 0.004 100);
    --ink-3:        oklch(60% 0.004 100);
    --ink-faint:    oklch(42% 0.004 100);
    --rule:         oklch(24% 0.005 260);
    --rule-soft:    oklch(20% 0.004 260);
    --margin-red:   oklch(58% 0.14 28);
    --saffron:      oklch(78% 0.13 66);
    --saffron-deep: oklch(72% 0.13 62);
    --indigo:       oklch(88% 0.02 260);
    --indigo-soft:  oklch(22% 0.01 260);
    --green:        oklch(72% 0.09 155);
    --green-soft:   oklch(24% 0.03 152);
    --accent:       var(--ink);
    --accent-on:    oklch(12% 0.004 260);
    --highlight:    var(--saffron);
    --focus:        var(--ink);
    --shadow-page:  0 1px 2px oklch(0% 0 0 / 0.4),
                    0 12px 32px -12px oklch(0% 0 0 / 0.65);
    --shadow-lift:  0 2px 6px oklch(0% 0 0 / 0.45),
                    0 18px 40px -14px oklch(0% 0 0 / 0.75);
  }
}

:root[data-theme="dark"] {
  --paper:        oklch(12% 0.004 260);
  --paper-sunk:   oklch(9% 0.004 260);
  --paper-raised: oklch(16% 0.005 260);
  --paper-edge:   oklch(28% 0.006 260);
  --ink:          oklch(96% 0.002 100);
  --ink-2:        oklch(78% 0.004 100);
  --ink-3:        oklch(60% 0.004 100);
  --ink-faint:    oklch(42% 0.004 100);
  --rule:         oklch(24% 0.005 260);
  --rule-soft:    oklch(20% 0.004 260);
  --margin-red:   oklch(58% 0.14 28);
  --saffron:      oklch(78% 0.13 66);
  --saffron-deep: oklch(72% 0.13 62);
  --indigo:       oklch(88% 0.02 260);
  --indigo-soft:  oklch(22% 0.01 260);
  --green:        oklch(72% 0.09 155);
  --green-soft:   oklch(24% 0.03 152);
  --accent:       var(--ink);
  --accent-on:    oklch(12% 0.004 260);
  --highlight:    var(--saffron);
  --focus:        var(--ink);
  --shadow-page:  0 1px 2px oklch(0% 0 0 / 0.4),
                  0 12px 32px -12px oklch(0% 0 0 / 0.65);
  --shadow-lift:  0 2px 6px oklch(0% 0 0 / 0.45),
                  0 18px 40px -14px oklch(0% 0 0 / 0.75);
}

:root[data-theme="light"] {
  color-scheme: light;
}