/* ==========================================================================
   BIG TUNA — design tokens + base  ·  "Spectrum" / Rainbow edition
   The single source of truth for color, type, spacing, radius, and elevation.
   Every app links this file and derives its styles from these variables:
     <link rel="stylesheet" href="/styles/tokens.css">
   Do not hardcode hex colors, ad-hoc radii, or one-off shadows in an app.

   Identity: pure-black canvas, glass surfaces (translucent + blur), Geist type.
   Brand accent is a bright coral-red. Each app is themed to a single color from
   the rainbow ramp by overriding `--accent` (e.g. `body { --accent: var(--c-blue); }`).
   The homepage launcher uses all rainbow colors together.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap');

:root {
  /* ---- Neutral ramp (pure-black canvas up to near-white text) ---- */
  --bg:            #000000;  /* page background (true black) */
  --bg-raised:     #0e0e0e;  /* sticky bars, footers */
  --surface:       #131313;  /* cards, panels */
  --surface-2:     #1b1b1b;  /* inputs, nested surfaces */
  --surface-3:     #262626;  /* hover fills, chips */
  --border:        #232323;  /* default hairline */
  --border-strong: #353535;  /* emphasized divider, input border */

  --text:          #e8e8e8;  /* primary text */
  --text-muted:    #a0a0a0;  /* secondary text */
  --text-dim:      #6a6a6a;  /* labels, meta */
  --text-faint:    #404040;  /* disabled, watermark */

  /* ---- Glass (translucent surface treatment) ---- */
  --glass:         rgba(19, 19, 19, 0.70);  /* card/panel glass fill */
  --glass-strong:  rgba(10, 10, 10, 0.80);  /* nav bars */
  --glass-border:  rgba(255, 255, 255, 0.10);
  --glass-border-hover: rgba(255, 255, 255, 0.18);
  --blur:          blur(14px);

  /* ---- Brand / app accent (default = coral-red; apps override --accent) ---- */
  --accent:        #ff5544;  /* primary actions, active state, brand */
  --accent-hover:  #ff7a6d;  /* hover on dark (lighter, not darker) */
  --accent-press:  #e63d2e;  /* active/pressed */
  --accent-soft:   color-mix(in srgb, var(--accent) 14%, transparent);  /* tint fills, selected rows */
  --accent-ring:   color-mix(in srgb, var(--accent) 45%, transparent);  /* focus ring */
  --accent-glow:   color-mix(in srgb, var(--accent) 28%, transparent);  /* hover glow */
  --on-accent:     #ffffff;  /* text/icons on an accent fill */

  /* ---- Rainbow ramp (per-app accents + the homepage spectrum grid) ----
     Tailwind-500 family; each app picks ONE as its --accent. Soft variants are
     12% tints for icon chips / selected states. */
  --c-red:     #ef4444;  --c-red-soft:    rgba(239, 68, 68, 0.12);
  --c-orange:  #f97316;  --c-orange-soft: rgba(249, 115, 22, 0.12);
  --c-amber:   #f59e0b;  --c-amber-soft:  rgba(245, 158, 11, 0.12);
  --c-yellow:  #eab308;  --c-yellow-soft: rgba(234, 179, 8, 0.12);
  --c-green:   #22c55e;  --c-green-soft:  rgba(34, 197, 94, 0.12);
  --c-teal:    #14b8a6;  --c-teal-soft:   rgba(20, 184, 166, 0.12);
  --c-cyan:    #06b6d4;  --c-cyan-soft:   rgba(6, 182, 212, 0.12);
  --c-blue:    #3b82f6;  --c-blue-soft:   rgba(59, 130, 246, 0.12);
  --c-indigo:  #6366f1;  --c-indigo-soft: rgba(99, 102, 241, 0.12);
  --c-purple:  #a855f7;  --c-purple-soft: rgba(168, 85, 247, 0.12);
  --c-pink:    #ec4899;  --c-pink-soft:   rgba(236, 72, 153, 0.12);

  /* ---- Semantic ---- */
  --success:       #22c55e;
  --warning:       #f59e0b;
  --danger:        #ff5544;

  /* ---- Type ---- */
  --font-ui:   'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;

  --text-xs:   0.72rem;
  --text-sm:   0.82rem;
  --text-base: 0.94rem;
  --text-lg:   1.10rem;
  --text-xl:   1.40rem;
  --text-2xl:  1.85rem;
  --text-3xl:  2.40rem;

  --weight-regular: 400;
  --weight-medium:  600;
  --weight-bold:    700;
  --weight-black:   800;

  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --tracking-label: 0.08em;  /* uppercase labels */

  /* ---- Spacing (4px base grid) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Radius (softer, rounder spectrum look) ---- */
  --radius-sm:   10px;   /* buttons, inputs, small controls */
  --radius:      14px;   /* default */
  --radius-lg:   20px;   /* cards, panels, modals */
  --radius-xl:   28px;   /* large tiles, hero surfaces */
  --radius-full: 999px;  /* pills, avatars, toggles */

  /* ---- Elevation (one shadow scale) ---- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 18px 44px rgba(0, 0, 0, 0.65);

  /* ---- Motion ---- */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  0.12s;
  --dur:       0.18s;
  --dur-slow:  0.30s;

  /* ---- Focus ring (apply to interactive elements) ---- */
  --ring: 0 0 0 3px var(--accent-ring);

  color-scheme: dark;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Typography defaults ---- */
h1, h2, h3, h4 { line-height: var(--leading-tight); font-weight: var(--weight-bold); letter-spacing: -0.01em; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

code, kbd, samp, pre { font-family: var(--font-mono); }

::selection { background: var(--accent-soft); color: var(--text); }

/* ---- Accessible focus: visible ring only for keyboard users ---- */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

/* ---- Form controls inherit type by default ---- */
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled, input:disabled, select:disabled, textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- Scrollbars (WebKit) ---- */
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--radius-full); border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   Shared primitives — opt-in classes for the common controls.
   Apps keep their own layout, but use these for buttons/inputs/cards so the
   interaction language (hover, focus, radius, elevation) stays identical.
   ========================================================================== */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 38px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  line-height: 1;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
  touch-action: manipulation;
}
.btn:hover { background: rgba(255, 255, 255, 0.10); border-color: var(--glass-border-hover); }
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 8px 24px -8px var(--accent-glow); }
.btn-primary:active { background: var(--accent-press); }

.btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

/* Inputs */
.field {
  width: 100%;
  min-height: 38px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field::placeholder { color: var(--text-dim); }
.field:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

/* Cards — glass surface */
.card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-1);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

/* Uppercase meta/label text */
.label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-dim);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}