/* Gurukool — Design Tokens · CLAYMORPHISM skin
   Soft pastel clay surfaces, oversized radii, puffy dual-inset shadows.
   Culturally Indian via subtle motifs, not stereotype. */

:root {
  /* Type */
  --font-sans: 'Plus Jakarta Sans', 'Noto Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Fraunces', 'Noto Serif', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Tint hue drives clay surfaces + shadows (overridden per accent theme) */
  --tint: 152;

  /* Brand — fresh academic green */
  --gk-green-50:  oklch(97% 0.02 155);
  --gk-green-100: oklch(93% 0.04 155);
  --gk-green-200: oklch(87% 0.07 155);
  --gk-green-300: oklch(78% 0.10 150);
  --gk-green-400: oklch(68% 0.12 150);
  --gk-green-500: oklch(58% 0.13 152);
  --gk-green-600: oklch(48% 0.13 152);
  --gk-green-700: oklch(40% 0.11 152);
  --gk-green-800: oklch(32% 0.08 152);
  --gk-green-900: oklch(22% 0.05 152);

  /* Lime accent — growth, energy */
  --gk-lime-300: oklch(86% 0.15 128);
  --gk-lime-400: oklch(80% 0.18 128);
  --gk-lime-500: oklch(72% 0.20 128);
  --gk-lime-600: oklch(60% 0.18 128);

  /* Warm neutrals (subtle warm undertone, not pure gray) */
  --gk-ivory:    oklch(98.6% 0.012 var(--tint));
  --gk-paper:    oklch(96.5% 0.022 var(--tint));
  --gk-stone-50:  oklch(96.5% 0.018 var(--tint));
  --gk-stone-100: oklch(93% 0.024 var(--tint));
  --gk-stone-200: oklch(88% 0.028 var(--tint));
  --gk-stone-300: oklch(78% 0.030 var(--tint));
  --gk-stone-400: oklch(63% 0.028 var(--tint));
  --gk-stone-500: oklch(52% 0.028 var(--tint));
  --gk-stone-600: oklch(42% 0.030 var(--tint));
  --gk-stone-700: oklch(32% 0.032 var(--tint));
  --gk-stone-800: oklch(24% 0.030 var(--tint));
  --gk-stone-900: oklch(17% 0.028 var(--tint));

  /* Semantic (status) — tuned to palette */
  --gk-success: oklch(65% 0.15 145);
  --gk-warn:    oklch(75% 0.14 75);
  --gk-danger:  oklch(60% 0.18 25);
  --gk-info:    oklch(60% 0.12 230);

  /* Light theme semantic surfaces — pastel clay */
  --bg:        oklch(94.5% 0.028 var(--tint));
  --bg-alt:    oklch(96.5% 0.022 var(--tint));
  --surface:   oklch(98.6% 0.012 var(--tint));
  --surface-2: oklch(96% 0.026 var(--tint));
  --border:    oklch(92% 0.022 var(--tint));
  --border-strong: oklch(86% 0.030 var(--tint));
  --text:      oklch(28% 0.045 var(--tint));
  --text-muted:oklch(56% 0.030 var(--tint));
  --text-soft: oklch(44% 0.035 var(--tint));
  --accent:    var(--gk-green-600);
  --accent-soft: var(--gk-green-100);
  --accent-ink:  var(--gk-green-800);
  --on-accent: #fff;
  --ring: color-mix(in oklch, var(--gk-green-500) 40%, transparent);

  /* Badge / status pairs (theme-aware) */
  --bd-neutral-bg: oklch(93% 0.024 var(--tint)); --bd-neutral-fg: oklch(32% 0.032 var(--tint));
  --bd-success-bg: color-mix(in oklch, var(--gk-success) 18%, transparent); --bd-success-fg: oklch(38% 0.13 145);
  --bd-warn-bg:    color-mix(in oklch, var(--gk-warn) 24%, transparent);    --bd-warn-fg:    oklch(40% 0.12 75);
  --bd-danger-bg:  color-mix(in oklch, var(--gk-danger) 16%, transparent);  --bd-danger-fg:  oklch(42% 0.15 25);
  --bd-info-bg:    color-mix(in oklch, var(--gk-info) 14%, transparent);    --bd-info-fg:    oklch(38% 0.13 230);
  --bd-lime-bg:    color-mix(in oklch, var(--gk-lime-400) 28%, transparent);--bd-lime-fg:    oklch(32% 0.12 128);

  /* Radii — clay is generously rounded */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 30px;
  --r-2xl: 40px;
  --r-full: 999px;

  /* Spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* Clay — outer soft drop + inner top highlight + inner bottom shade */
  --clay-hi: oklch(100% 0 0 / 0.85);
  --clay-lo: oklch(45% 0.07 var(--tint) / 0.13);
  --clay-cast: oklch(48% 0.07 var(--tint) / 0.20);

  --clay-sm: 0 4px 10px -3px var(--clay-cast), inset 0 2px 4px var(--clay-hi), inset 0 -3px 6px var(--clay-lo);
  --clay:    0 12px 24px -10px var(--clay-cast), inset 0 4px 7px var(--clay-hi), inset 0 -6px 11px var(--clay-lo);
  --clay-lg: 0 26px 44px -18px var(--clay-cast), inset 0 6px 10px var(--clay-hi), inset 0 -9px 16px var(--clay-lo);
  --clay-press: inset 0 5px 10px var(--clay-lo), inset 0 -2px 5px var(--clay-hi);
  --clay-well:  inset 0 4px 9px var(--clay-lo), inset 0 -2px 4px var(--clay-hi);

  /* Legacy shadow tokens now resolve to clay */
  --sh-xs: var(--clay-sm);
  --sh-sm: var(--clay-sm);
  --sh-md: var(--clay);
  --sh-lg: var(--clay-lg);
  --sh-xl: var(--clay-lg);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}

[data-theme="dark"] {
  --bg:        oklch(21% 0.028 var(--tint));
  --bg-alt:    oklch(24% 0.026 var(--tint));
  --surface:   oklch(27% 0.030 var(--tint));
  --surface-2: oklch(31% 0.030 var(--tint));
  --border:    oklch(34% 0.030 var(--tint));
  --border-strong: oklch(42% 0.032 var(--tint));
  --text:      oklch(96% 0.012 var(--tint));
  --text-muted:oklch(70% 0.022 var(--tint));
  --text-soft: oklch(82% 0.020 var(--tint));
  /* Dark clay: shadow-only modelling — no light rim. Lift comes from surface
     lightness steps; depth from a dark cast plus dark inner shading. */
  --clay-hi:   oklch(100% 0 0 / 0);
  --clay-lo:   oklch(8% 0.03 var(--tint) / 0.50);
  --clay-cast: oklch(6% 0.03 var(--tint) / 0.66);
  --clay-sm: 0 4px 10px -3px var(--clay-cast), inset 0 -3px 7px var(--clay-lo);
  --clay:    0 14px 26px -10px var(--clay-cast), inset 0 -7px 13px var(--clay-lo);
  --clay-lg: 0 28px 48px -18px var(--clay-cast), inset 0 -10px 18px var(--clay-lo);
  --clay-press: inset 0 6px 12px var(--clay-lo);
  --clay-well:  inset 0 5px 11px var(--clay-lo);

  /* Neutral ramp flips so stone-100 stays a *quiet* surface, not a bright slab */
  --gk-stone-50:  oklch(24% 0.026 var(--tint));
  --gk-stone-100: oklch(31% 0.030 var(--tint));
  --gk-stone-200: oklch(37% 0.030 var(--tint));
  --gk-stone-300: oklch(58% 0.028 var(--tint));
  --gk-stone-400: oklch(70% 0.024 var(--tint));
  --gk-stone-500: oklch(74% 0.022 var(--tint));
  --gk-stone-600: oklch(82% 0.020 var(--tint));
  --gk-stone-700: oklch(90% 0.016 var(--tint));
  --gk-stone-800: oklch(94% 0.012 var(--tint));
  --gk-stone-900: oklch(97% 0.010 var(--tint));
  --gk-ivory:     oklch(27% 0.030 var(--tint));
  --gk-paper:     oklch(24% 0.026 var(--tint));

  /* Badges: deeper fills, light ink */
  --bd-neutral-bg: oklch(33% 0.028 var(--tint)); --bd-neutral-fg: oklch(90% 0.016 var(--tint));
  --bd-success-bg: color-mix(in oklch, var(--gk-success) 26%, transparent); --bd-success-fg: oklch(88% 0.10 145);
  --bd-warn-bg:    color-mix(in oklch, var(--gk-warn) 26%, transparent);    --bd-warn-fg:    oklch(90% 0.09 80);
  --bd-danger-bg:  color-mix(in oklch, var(--gk-danger) 28%, transparent);  --bd-danger-fg:  oklch(90% 0.08 25);
  --bd-info-bg:    color-mix(in oklch, var(--gk-info) 26%, transparent);    --bd-info-fg:    oklch(90% 0.07 230);
  --bd-lime-bg:    color-mix(in oklch, var(--gk-lime-500) 30%, transparent);--bd-lime-fg:    oklch(92% 0.12 128);
  --accent:    oklch(76% 0.13 150);
  --on-accent: oklch(20% 0.05 var(--tint));
  --accent-soft: oklch(30% 0.08 152);
  --accent-ink:  var(--gk-green-100);
}

/* Accent themes (Tweaks) */
[data-accent="lime"]    { --tint: 128; --accent: var(--gk-lime-600); --accent-soft: oklch(92% 0.10 128); --accent-ink: oklch(35% 0.12 128); --ring: color-mix(in oklch, var(--gk-lime-500) 40%, transparent); }
[data-accent="saffron"] { --tint: 60; --accent: oklch(65% 0.17 55); --accent-soft: oklch(94% 0.05 55); --accent-ink: oklch(35% 0.13 55); --ring: color-mix(in oklch, oklch(65% 0.17 55) 40%, transparent); }
[data-accent="indigo"]  { --tint: 272; --accent: oklch(52% 0.16 270); --accent-soft: oklch(94% 0.04 270); --accent-ink: oklch(32% 0.13 270); --ring: color-mix(in oklch, oklch(52% 0.16 270) 40%, transparent); }
[data-accent="teal"]    { --tint: 200; --accent: oklch(55% 0.11 195); --accent-soft: oklch(94% 0.04 195); --accent-ink: oklch(32% 0.10 195); --ring: color-mix(in oklch, oklch(55% 0.11 195) 40%, transparent); }

/* Dark + accent combos: lift the fill so on-accent ink stays legible */
[data-theme="dark"][data-accent="lime"],   [data-theme="dark"] [data-accent="lime"]   { --accent: oklch(82% 0.17 128); --accent-soft: oklch(34% 0.09 128); --accent-ink: oklch(88% 0.12 128); }
[data-theme="dark"][data-accent="saffron"],[data-theme="dark"] [data-accent="saffron"]{ --accent: oklch(78% 0.14 60);  --accent-soft: oklch(34% 0.08 60);  --accent-ink: oklch(90% 0.09 60); }
[data-theme="dark"][data-accent="indigo"], [data-theme="dark"] [data-accent="indigo"] { --accent: oklch(74% 0.13 272); --accent-soft: oklch(32% 0.09 272); --accent-ink: oklch(90% 0.07 272); }
[data-theme="dark"][data-accent="teal"],   [data-theme="dark"] [data-accent="teal"]   { --accent: oklch(78% 0.11 200); --accent-soft: oklch(32% 0.07 200); --accent-ink: oklch(90% 0.07 200); }
[data-theme="dark"][data-accent="green"],  [data-theme="dark"] [data-accent="green"]  { --accent: oklch(76% 0.13 150); --accent-soft: oklch(32% 0.08 152); --accent-ink: oklch(90% 0.09 152); }

/* Density */
[data-density="compact"] { --row-h: 36px; --pad-y: 8px; --pad-x: 12px; --gap: 8px; }
[data-density="cozy"],
:root                    { --row-h: 44px; --pad-y: 12px; --pad-x: 16px; --gap: 12px; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

/* Jali motif — subtle 6-point lattice (used sparingly) */
.gk-jali {
  background-image:
    radial-gradient(circle at 50% 50%, var(--accent-soft) 1px, transparent 1.5px),
    radial-gradient(circle at 0 0, var(--accent-soft) 1px, transparent 1.5px),
    radial-gradient(circle at 100% 100%, var(--accent-soft) 1px, transparent 1.5px);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px, 12px 12px;
}

/* Clay utilities */
.gk-clay { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--clay); border: none; }
.gk-clay-sm { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--clay-sm); border: none; }
.gk-clay-well { background: var(--surface-2); border-radius: var(--r-lg); box-shadow: var(--clay-well); border: none; }
.gk-clay-press:active { box-shadow: var(--clay-press); transform: translateY(1px); }

/* Clay skin: soften hairline borders anywhere they survive inline styles */
[data-skin="clay"] hr { border: none; height: 2px; background: var(--border); border-radius: 2px; }