/* Design tokens. Brand values come from the Spoofzy brand kit, October 2026 edition. */

@font-face {
  font-family: Outfit;
  src: url('/assets/fonts/outfit-variable.woff') format('woff');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Lilita One';
  src: url('/assets/fonts/lilita-one.woff') format('woff');
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Brand */
  --ivory: #fffef5;
  --navy: #06263b;
  --pink: #e0007f; /* A shade under the kit's #f00088 so white sticker text passes AA. */
  --lime: #eaff54;
  --cyan: #aaefff;
  --mint: #a9f5d7;
  --blush: #ffc4ea;

  /* Text */
  --ink: var(--navy);
  --ink-muted: #465b68; /* Kit muted, deepened to stay AA over saturated colour behind glass. */
  --on-navy: #ffffff;

  /* Status: dark text on a pale tint, so state never relies on colour alone */
  --ok-ink: #0a6b48;
  --ok-tint: #d3f8e6;
  --bad-ink: #b0123f;
  --bad-tint: #ffe0e8;
  --warn-ink: #7a5600;
  --warn-tint: #fff2bf;
  --busy-ink: #0b5f7a;
  --busy-tint: #d5f6ff;

  /* Glass */
  --glass-fill: rgb(255 255 255 / 0.5);
  --glass-fill-strong: rgb(255 255 255 / 0.72);
  --glass-well: rgb(255 255 255 / 0.44);
  --glass-blur: 32px;
  --glass-saturate: 175%;
  --glass-highlight: rgb(255 255 255 / 0.9);
  --glass-edge:
    linear-gradient(
      150deg,
      rgb(255 255 255 / 0.95),
      rgb(255 255 255 / 0.35) 34%,
      rgb(6 38 59 / 0.07) 66%,
      rgb(255 255 255 / 0.7)
    );
  --hairline: rgb(6 38 59 / 0.09);

  /* Elevation */
  --shadow-soft: 0 1px 2px rgb(6 38 59 / 0.05), 0 8px 20px -10px rgb(6 38 59 / 0.16);
  --shadow-panel: 0 1px 1px rgb(6 38 59 / 0.03), 0 24px 56px -28px rgb(6 38 59 / 0.26);
  --shadow-lift: 0 2px 4px rgb(6 38 59 / 0.08), 0 32px 80px -24px rgb(6 38 59 / 0.36);

  /* Type */
  --font-sans: Outfit, 'Avenir Next', Avenir, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Lilita One', var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-md: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.375rem;
  --text-title: clamp(2.5rem, 1.9rem + 1.9vw, 3.5rem);

  /* Shape */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-card: 28px;
  --radius-full: 999px;

  /* Space */
  --gutter: 16px;
  --sidebar-width: 268px;
  --tap: 44px;

  /* Motion: a quick entrance into a gentle settle, per the brand motion notes */
  --ease: cubic-bezier(0.2, 0.85, 0.2, 1);
  --ease-pop: cubic-bezier(0.3, 1.3, 0.5, 1);
  --fast: 150ms;
  --medium: 260ms;
  --settle: 400ms;
}

/* Each tool keeps one tint across the nav, title marker and drop target. */
[data-tool='spoofer'] { --tool-tint: var(--cyan); }
[data-tool='metadata-cleaner'] { --tool-tint: var(--lime); }
[data-tool='video-studio'] { --tool-tint: var(--mint); }
[data-tool='ai-retake'] { --tool-tint: var(--blush); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-fill: rgb(255 255 255 / 0.9);
    --glass-fill-strong: rgb(255 255 255 / 0.96);
  }
}

/* The preference asks for less transparency, not none: the glass gets thicker and
   keeps its frost, so nothing sharp shows through and text stays fully legible. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-fill: rgb(255 255 255 / 0.68);
    --glass-fill-strong: rgb(255 255 255 / 0.86);
    --glass-well: rgb(255 255 255 / 0.5);
  }
}

@media (prefers-contrast: more) {
  :root {
    --glass-fill: rgb(255 255 255 / 0.92);
    --glass-fill-strong: #ffffff;
    --ink-muted: #2f4552;
    --hairline: rgb(6 38 59 / 0.3);
  }
}