/* ============================================================
   Rocket Kitchen design tokens
   Light-first palette on :root, dark overrides under the media
   query, system-preference media queries for motion/transparency/
   contrast. static/rk/js/spring.js is the spring engine kept for
   future gesture surfaces; nothing in the current chrome uses it.
   ============================================================ */

:root {
  /* ---- color: surfaces ---- */
  --rk-bg: #f5f5f7;
  --rk-surface: #ffffff;
  --rk-surface-raised: #ffffff;
  --rk-surface-sunken: #f0f0f2;
  --rk-border: rgba(0, 0, 0, 0.08);
  --rk-border-strong: rgba(0, 0, 0, 0.14);

  /* ---- color: text ---- */
  --rk-text: #1d1d1f;
  /* Three weights of ink. Tertiary is the quietest text that still reads
     at AA (4.5:1) on white and on the sunken surface — SKU codes and
     checkpoint states live there, so it cannot be decorative-grey. */
  --rk-text-secondary: rgba(29, 29, 31, 0.72);
  --rk-text-tertiary: rgba(29, 29, 31, 0.62);

  /* ---- color: brand / accent ---- */
  --rk-accent: #ff5a2c;       /* Rocket Kitchen orange: the mark, rings, tints, bars */
  --rk-accent-strong: #e0481e;
  --rk-accent-tint: rgba(255, 90, 44, 0.12);
  /* Solid fills that carry text (primary buttons, the active tab). The brand
     orange only reaches 3.1:1 under white text, so the fill deepens in light
     mode and the text darkens in dark mode — the Material pattern. */
  --rk-accent-solid: #cc3a12;
  --rk-accent-solid-hover: #b8360f;
  --rk-text-on-solid: #ffffff;

  /* ---- color: semantic ---- */
  --rk-success: #1fa15a;
  --rk-success-tint: rgba(31, 161, 90, 0.12);
  --rk-warning: #c88400;
  --rk-warning-tint: rgba(200, 132, 0, 0.14);
  --rk-danger: #e0392f;
  --rk-danger-tint: rgba(224, 57, 47, 0.1);

  /* ---- semantic "ink": the same hues at text weight. The bright values above
     are fills, icons and bars; on their own tints they measure ~2.5:1, so
     EVERY text use — badges, counts, stat values, tags — takes the ink, and a
     solid ink fill takes --rk-text-on-solid. ---- */
  --rk-success-ink: #14743f;
  --rk-warning-ink: #7f5200;
  --rk-danger-ink: #a5251d;
  --rk-accent-ink: #b8360f;

  /* ---- materials (translucent surfaces) ---- */
  --rk-material-bg: rgba(255, 255, 255, 0.72);
  --rk-material-blur: 20px;
  --rk-material-border: rgba(255, 255, 255, 0.5);
  --rk-material-heavy-bg: rgba(246, 246, 248, 0.85);

  /* ---- brand: Macros / Soulara tags ---- */
  --rk-macros: #2f6fed;
  --rk-macros-ink: #1e56c9;
  --rk-macros-tint: rgba(47, 111, 237, 0.12);
  --rk-soulara: #8a4fd6;
  --rk-soulara-ink: #6d35b5;
  --rk-soulara-tint: rgba(138, 79, 214, 0.12);

  /* ---- spacing scale ---- */
  --rk-space-1: 0.25rem;
  --rk-space-2: 0.5rem;
  --rk-space-3: 0.75rem;
  --rk-space-4: 1rem;
  --rk-space-5: 1.5rem;
  --rk-space-6: 2rem;
  --rk-space-7: 3rem;

  /* ---- radius ---- */
  --rk-radius-sm: 8px;
  --rk-radius-md: 14px;
  --rk-radius-lg: 20px;
  --rk-radius-pill: 999px;

  /* ---- shadow (material weight: heavier = more separated) ---- */
  --rk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.03);
  --rk-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
  --rk-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.08);

  /* ---- motion: CSS-side easing that mirrors the spring defaults ----
     critically damped (no overshoot) approximated as a cubic-bezier for
     the plain CSS transitions used on discrete (non-gesture) elements;
     the JS spring engine (spring.js) is reserved for gesture surfaces. */
  --rk-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --rk-ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --rk-duration-fast: 120ms;
  --rk-duration-base: 220ms;
  --rk-duration-slow: 360ms;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rk-bg: #000000;
    --rk-surface: #1c1c1e;
    --rk-surface-raised: #242426;
    --rk-surface-sunken: #141416;
    --rk-border: rgba(255, 255, 255, 0.1);
    --rk-border-strong: rgba(255, 255, 255, 0.16);

    --rk-text: #f5f5f7;
    --rk-text-secondary: rgba(245, 245, 247, 0.7);
    --rk-text-tertiary: rgba(245, 245, 247, 0.56);

    --rk-accent: #ff7a4d;
    --rk-accent-strong: #ff9366;
    --rk-accent-tint: rgba(255, 122, 77, 0.16);
    --rk-accent-solid: #ff7a4d;
    --rk-accent-solid-hover: #ff9366;
    --rk-text-on-solid: #1d1d1f;

    --rk-success: #37d078;
    --rk-success-tint: rgba(55, 208, 120, 0.16);
    --rk-warning: #e0a52f;
    --rk-warning-tint: rgba(224, 165, 47, 0.16);
    --rk-danger: #ff6259;
    --rk-danger-tint: rgba(255, 98, 89, 0.14);

    --rk-success-ink: #37d078;
    --rk-warning-ink: #e0a52f;
    --rk-danger-ink: #ff8a82;  /* lighter than the fill: 5:1 on its own tint */
    --rk-accent-ink: #ff9366;

    --rk-material-bg: rgba(28, 28, 30, 0.72);
    --rk-material-border: rgba(255, 255, 255, 0.08);
    --rk-material-heavy-bg: rgba(18, 18, 20, 0.85);

    --rk-macros: #5d9bff;
    --rk-macros-ink: #5d9bff;
    --rk-macros-tint: rgba(93, 155, 255, 0.16);
    --rk-soulara: #b48cf0;
    --rk-soulara-ink: #b48cf0;
    --rk-soulara-tint: rgba(180, 140, 240, 0.16);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --rk-bg: #000000;
  --rk-surface: #1c1c1e;
  --rk-surface-raised: #242426;
  --rk-surface-sunken: #141416;
  --rk-border: rgba(255, 255, 255, 0.1);
  --rk-border-strong: rgba(255, 255, 255, 0.16);
  --rk-text: #f5f5f7;
  --rk-text-secondary: rgba(245, 245, 247, 0.7);
  --rk-text-tertiary: rgba(245, 245, 247, 0.56);
  --rk-accent: #ff7a4d;
  --rk-accent-strong: #ff9366;
  --rk-accent-tint: rgba(255, 122, 77, 0.16);
  --rk-accent-solid: #ff7a4d;
  --rk-accent-solid-hover: #ff9366;
  --rk-text-on-solid: #1d1d1f;
  --rk-success: #37d078;
  --rk-success-tint: rgba(55, 208, 120, 0.16);
  --rk-warning: #e0a52f;
  --rk-warning-tint: rgba(224, 165, 47, 0.16);
  --rk-danger: #ff6259;
  --rk-danger-tint: rgba(255, 98, 89, 0.14);
  --rk-success-ink: #37d078;
  --rk-warning-ink: #e0a52f;
  --rk-danger-ink: #ff8a82;  /* lighter than the fill: 5:1 on its own tint */
  --rk-accent-ink: #ff9366;
  --rk-material-bg: rgba(28, 28, 30, 0.72);
  --rk-material-border: rgba(255, 255, 255, 0.08);
  --rk-material-heavy-bg: rgba(18, 18, 20, 0.85);
  --rk-macros: #5d9bff;
  --rk-macros-ink: #5d9bff;
  --rk-macros-tint: rgba(93, 155, 255, 0.16);
  --rk-soulara: #b48cf0;
  --rk-soulara-ink: #b48cf0;
  --rk-soulara-tint: rgba(180, 140, 240, 0.16);
  color-scheme: dark;
}

@media (prefers-contrast: more) {
  :root {
    --rk-border: rgba(0, 0, 0, 0.35);
    --rk-border-strong: rgba(0, 0, 0, 0.5);
    --rk-material-bg: var(--rk-surface);
  }
  :root:not([data-theme="light"]) {
    --rk-border: rgba(255, 255, 255, 0.35);
    --rk-border-strong: rgba(255, 255, 255, 0.5);
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --rk-material-bg: var(--rk-surface);
    --rk-material-blur: 0px;
    --rk-material-heavy-bg: var(--rk-surface);
  }
}

/* ============================================================
   Base + typography — optical sizing, size-specific tracking/leading
   ============================================================ */

* { box-sizing: border-box; }

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

body {
  background:
    radial-gradient(1100px 420px at 15% -10%, rgba(255, 90, 44, 0.07), transparent 60%),
    var(--rk-bg);
  color: var(--rk-text);
  font: 100%/1.5 -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .rk-display {
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0;
}

h1, .rk-display-lg { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
h2, .rk-display-md { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); letter-spacing: -0.015em; }
h3, .rk-display-sm { font-size: 1.125rem; letter-spacing: -0.01em; line-height: 1.2; }

p, .rk-body { font-size: 0.9375rem; line-height: 1.55; letter-spacing: 0; color: var(--rk-text); }
.rk-text-secondary { color: var(--rk-text-secondary); }
.rk-text-tertiary { color: var(--rk-text-tertiary); }

.rk-caption {
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--rk-text-secondary);
  text-transform: uppercase;
  font-weight: 600;
}

.rk-figure {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: -0.01em;
}

a { color: inherit; }

/* ============================================================
   Motion system-preference gates
   ============================================================ */

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

/* ============================================================
   Browser surfaces — the parts we did not draw still carry the
   design: selection, caret, focus ring, scrollbars.
   ============================================================ */

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

input, textarea, select {
  caret-color: var(--rk-accent);
}

:focus-visible {
  outline: 2px solid var(--rk-accent);
  outline-offset: 2px;
}

/* Elements with their own focus treatment opt out of the global ring. */
.rk-input:focus-visible { outline: none; }

* {
  scrollbar-width: thin;
  scrollbar-color: var(--rk-border-strong) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--rk-border-strong);
  border-radius: var(--rk-radius-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--rk-text-tertiary); background-clip: content-box; }