/*
 * georg design system · tokens and base primitives
 *
 * Usage:
 *   1. Load the fonts (fonts.css for prototypes, @fontsource packages in apps).
 *   2. Load this file.
 *   3. Load georg-theme.js in <head> (no defer) so theme and accent apply before first paint.
 *
 * Theme state lives in attributes on <html>:
 *   data-theme="light" | "dark"                              (resolved)
 *   data-theme-pref="system" | "light" | "dark"              (user preference)
 *   data-accent="purple" | "fuchsia" | "green" | "blue" | "orange"
 */

/* ── Tokens: light mode (default) ───────────────────────── */
:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #fafaf9;
  --bg-elev: #ffffff;
  --bg-sunken: #f4f4f2;
  --bg-hover: #f1f1ef;

  /* Borders */
  --border: #e9e9e6;
  --border-strong: #dcdcd7;

  /* Text */
  --text: #18181b;
  --text-2: #55555e;
  --text-3: #6b6b74;

  /* Accent palette (neon): every accent at once, for pickers and swatches */
  --accent-purple: #8f00f5;
  --accent-fuchsia: #c40062;
  --accent-green: #007527;
  --accent-blue: #005edb;
  --accent-orange: #b04000;

  /* Active accent (purple, default). --accent-glow is the ring plus light of solid accent elements */
  --accent: var(--accent-purple);
  --accent-2: #7400c7;
  --accent-soft: rgba(143, 0, 245, .1);
  --accent-ring: rgba(143, 0, 245, .45);
  --accent-glow-color: rgba(143, 0, 245, .45);
  --accent-glow: 0 0 0 1px var(--accent-ring), 0 4px 14px -4px var(--accent-glow-color);
  --on-accent: #fff;

  /* Status */
  --success: #15803d;
  --warn: #b45309;
  --danger: #c41d1d;
  --danger-soft: rgba(196, 29, 29, .08);

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(16, 16, 20, .04), 0 1px 1px rgba(16, 16, 20, .03);
  --shadow-2: 0 8px 24px -8px rgba(16, 16, 20, .12), 0 2px 6px rgba(16, 16, 20, .04);
  --shadow-3: 0 24px 64px -16px rgba(16, 16, 20, .25), 0 4px 12px rgba(16, 16, 20, .06);

  /* Radii */
  --r-1: 6px;
  --r-2: 8px;
  --r-3: 12px;
  --r-pill: 999px;

  /* Motion */
  --dur-1: 150ms;   /* hover, color */
  --dur-2: 220ms;   /* appear, opacity */
  --dur-3: 320ms;   /* movement, springs */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* Typography */
  --font-display: "Stack Sans Notch", "Geist", ui-sans-serif, system-ui, sans-serif;
  --font: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs: 11px;      /* uppercase labels, metadata */
  --text-sm: 12.5px;    /* secondary text, chips, buttons */
  --text-base: 13.5px;  /* interface body */
  --text-md: 15px;      /* reading body */
  --text-lg: 19px;      /* view titles (display) */
  --text-xl: 24px;      /* page titles (display) */
  --text-2xl: 32px;     /* covers, large empty states (display) */

  /* Icons (Tabler) */
  --icon-sm: 14px;
  --icon: 16px;
  --icon-lg: 20px;
  --icon-stroke: 1.5;
}

/* ── Tokens: dark mode ───────────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0b0c;
  --bg-elev: #131315;
  --bg-sunken: #0f0f11;
  --bg-hover: #1a1a1d;
  --border: #222226;
  --border-strong: #2d2d32;
  --text: #ededef;
  --text-2: #a5a5ae;
  --text-3: #878791;
  --accent-purple: #c06aff;
  --accent-fuchsia: #ff2e88;
  --accent-green: #7cff00;
  --accent-blue: #00e5ff;
  --accent-orange: #ff6a00;
  --accent: var(--accent-purple);
  --accent-2: #d394ff;
  --accent-soft: rgba(192, 106, 255, .14);
  --accent-ring: rgba(192, 106, 255, .55);
  --accent-glow-color: rgba(192, 106, 255, .6);
  --accent-glow: 0 0 0 1px var(--accent-ring), 0 0 18px var(--accent-glow-color);
  --on-accent: #0b0b0c;
  --success: #22c55e;
  --warn: #f59e0b;
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, .1);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 8px 24px -8px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .3);
  --shadow-3: 0 24px 64px -16px rgba(0, 0, 0, .8), 0 4px 12px rgba(0, 0, 0, .4);
}

/* ── Accents ─────────────────────────────────────────────── */
[data-accent="fuchsia"] { --accent: var(--accent-fuchsia); --accent-2: #a80054; --accent-soft: rgba(196, 0, 98, .09); --accent-ring: rgba(196, 0, 98, .45); --accent-glow-color: rgba(196, 0, 98, .45); }
[data-accent="green"]   { --accent: var(--accent-green);   --accent-2: #00661f; --accent-soft: rgba(0, 117, 39, .1);  --accent-ring: rgba(0, 117, 39, .45); --accent-glow-color: rgba(0, 117, 39, .45); }
[data-accent="blue"]    { --accent: var(--accent-blue);    --accent-2: #004fbd; --accent-soft: rgba(0, 94, 219, .09); --accent-ring: rgba(0, 94, 219, .45); --accent-glow-color: rgba(0, 94, 219, .45); }
[data-accent="orange"]  { --accent: var(--accent-orange);  --accent-2: #9c3900; --accent-soft: rgba(176, 64, 0, .1);  --accent-ring: rgba(176, 64, 0, .45); --accent-glow-color: rgba(176, 64, 0, .45); }
[data-theme="dark"][data-accent="fuchsia"] { --accent: var(--accent-fuchsia); --accent-2: #ff63a6; --accent-soft: rgba(255, 46, 136, .14); --accent-ring: rgba(255, 46, 136, .55); --accent-glow-color: rgba(255, 46, 136, .6); }
[data-theme="dark"][data-accent="green"]   { --accent: var(--accent-green);   --accent-2: #a6ff52; --accent-soft: rgba(124, 255, 0, .12); --accent-ring: rgba(124, 255, 0, .5);  --accent-glow-color: rgba(124, 255, 0, .5); }
[data-theme="dark"][data-accent="blue"]    { --accent: var(--accent-blue);    --accent-2: #66efff; --accent-soft: rgba(0, 229, 255, .12); --accent-ring: rgba(0, 229, 255, .5);  --accent-glow-color: rgba(0, 229, 255, .5); }
[data-theme="dark"][data-accent="orange"]  { --accent: var(--accent-orange);  --accent-2: #ff8f40; --accent-soft: rgba(255, 106, 0, .14); --accent-ring: rgba(255, 106, 0, .55); --accent-glow-color: rgba(255, 106, 0, .6); }

/* ── Base ────────────────────────────────────────────────── */
body {
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; border-radius: var(--r-1); }
::selection { background: var(--accent-soft); }

/* Display: Stack Sans Notch only for headings (15px and up) and the wordmark */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.2;
  text-wrap: balance;
}
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-3); }
.label {
  font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3);
}

/* ── Motion ──────────────────────────────────────────────── */
/* Subtle fade for view, tab and panel changes */
.fade-in { animation: georg-soft-in 240ms var(--ease-out) both; }
@keyframes georg-soft-in { from { opacity: 0; transform: translateY(3px); } }

/* Short bounce to confirm a change (counters, replaced toasts) */
.pop { animation: georg-pop 420ms var(--ease-spring); }
@keyframes georg-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* Skeleton shimmer */
.skeleton {
  border-radius: 4px;
  background: linear-gradient(90deg, var(--bg-sunken) 25%, var(--bg-hover) 50%, var(--bg-sunken) 75%);
  background-size: 200% 100%;
  animation: georg-shimmer 1.3s linear infinite;
}
@keyframes georg-shimmer { to { background-position: -200% 0; } }

/* Theme and accent changes: cross-fade (View Transitions API) */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 300ms; animation-timing-function: var(--ease-out); }

/* Accessibility: no motion when the OS asks for it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}