/* ============================================================================
   JugaadBox - Brand token overrides
   Several tools were built on the Perplexity "design system" token set
   (--color-* with teal primary and cream/charcoal surfaces) and each shipped
   its own palette + the FKGroteskNeue CDN font. This file remaps those tokens
   to the brand look (cream paper, charcoal ink, jugaad orange) so every tool
   matches the homepage WITHOUT rewriting each tool's markup.

   Load it AFTER the tool's own stylesheet:
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="/tools/shared/jugaadbox-tokens.css">
   ============================================================================ */

:root,
:root:root,
html[lang]:root,
[data-color-scheme="light"],
[data-color-scheme="dark"] {
  /* Brand palette */
  --jb-cream: #F0EFC6;
  --jb-cream-soft: #F7F6E2;
  --jb-paper: #FDFCF1;
  --jb-ink: #292929;
  --jb-orange: #F68827;
  --jb-orange-deep: #D96F14;
  /* Orange is bright on cream. Text-sized elements use the darker tone so they
     stay above the WCAG AA contrast ratio; solid fills keep the bright tone. */
  --jb-orange-text: #A8500A;

  /* Core Perplexity surface/text tokens -> brand cream theme */
  --color-background: #F0EFC6;
  --color-surface: #FDFCF1;
  --color-text: #292929;
  --color-text-secondary: #5A5A52;

  /* Primary accent -> jugaad orange (keep button text readable) */
  --color-primary: #A8500A;
  --color-primary-fill: #F68827;
  --color-primary-hover: #C4600D;
  --color-primary-active: #8F4308;
  --color-btn-primary-text: #FFFFFF;

  /* Secondary / surfaces */
  --color-secondary: rgba(41, 41, 41, 0.06);
  --color-secondary-hover: rgba(41, 41, 41, 0.10);
  --color-secondary-active: rgba(41, 41, 41, 0.14);
  --color-card-border: rgba(41, 41, 41, 0.14);
  --color-card-border-inner: rgba(41, 41, 41, 0.14);
  --color-border: rgba(41, 41, 41, 0.18);

  /* Status colors aligned with the theme */
  --color-success: #237046;
  --color-error: #C8452F;
  --color-warning: #9A6205;
  --color-info: #A8500A;

  /* RGB channel variants used in rgba() expressions across the tools */
  --color-teal-500-rgb: 246, 136, 39;
  --color-teal-300-rgb: 246, 136, 39;
  --color-success-rgb: 47, 143, 91;
  --color-error-rgb: 200, 69, 47;
  --color-warning-rgb: 217, 140, 11;
  --color-info-rgb: 217, 111, 20;

  /* Focus ring */
  --color-focus-ring: rgba(246, 136, 39, 0.40);

  /* Typography: drop the external Perplexity font for the brand fonts */
  --font-family-base: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-display: 'Baloo 2', 'Segoe UI', system-ui, sans-serif;
  --font-family-mono: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
}

/* Several tools declare their own `:root` block AFTER this file's `:root`
   (they were built on the Perplexity design system and ship its full colour
   scale). A `:root` rule cannot beat a later `:root` rule, so the base scale is
   remapped here with a higher-specificity selector that still matches the
   document root. This keeps every tool on the brand palette without editing
   each tool's own token block. */
:root:root,
html[lang]:root {
  /* Teal scale -> jugaad orange. */
  --color-teal-300: #A8500A;
  --color-teal-400: #C4600D;
  --color-teal-500: #A8500A;
  --color-teal-600: #8F4308;
  --color-teal-700: #7A3906;
  --color-teal-800: #612D05;
  --color-teal-500-rgb: 168, 80, 10;
  --color-teal-300-rgb: 168, 80, 10;

  /* Orange scale -> darker amber so status text reads on cream. */
  --color-orange-400: #9A6205;
  --color-orange-500: #9A6205;
  --color-orange-600: #7F5004;

  /* Cream/charcoal surface scale -> brand paper tones. */
  --color-cream-50: #F0EFC6;
  --color-cream-100: #FDFCF1;
  --color-charcoal-700: #F0EFC6;
  --color-charcoal-800: #FDFCF1;

  /* Text scale -> ink. */
  --color-slate-900: #292929;
  --color-slate-500: #5A5A52;
  --color-gray-200: #292929;
  --color-gray-300: #3D3D3A;
  --color-gray-400: #6E6E62;
}

/* Some tools hardcode a gradient/text on body; make sure the base canvas is
   the brand cream background and brand font regardless of prior rules. */
body {
  background: #F0EFC6;
  color: #292929;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Baloo 2', 'Segoe UI', system-ui, sans-serif;
}

/* Primary buttons across these tools share the .btn--primary / .tv-btn--primary
   patterns; give them the brand gradient for a consistent CTA look. */
.btn--primary,
.tv-btn--primary,
.btn-download-all {
  background: linear-gradient(135deg, #E2760F 0%, #B85A0C 100%) !important;
  color: #ffffff !important;
  border: none !important;
}
.btn--primary:hover,
.tv-btn--primary:hover,
.btn-download-all:hover {
  filter: brightness(1.05);
}

/* Filled/active controls across the tools use white label text. Bright orange
   does not carry white text at the WCAG AA ratio, so filled states use the
   deeper orange. */
.tv-segmented-btn.active,
.tv-btn--accent,
.mode-tab.active,
.qr-type-btn.active,
.filter-pill.active,
.service-btn.active,
.category-pill.active {
  background: linear-gradient(135deg, #E2760F 0%, #B85A0C 100%) !important;
  border-color: #B85A0C !important;
  color: #FFFFFF !important;
}


/* ---- Fake News tool uses its own --primary/--bg-* token names ---- */
:root {
  --primary: #F68827;
  /* Deeper tone for filled controls that carry white text. */
  --primary-strong: #B85A0C;
  --secondary: #D96F14;
  --bg-dark: #F0EFC6;
  --bg-panel: #FDFCF1;
  --bg-input: #FFFFFF;
  --text-primary: #292929;
  --text-secondary: #5A5A52;
  --border: rgba(41, 41, 41, 0.18);
}

/* Filled toggle/pill controls in the Fake News tool carry white label text, so
   they use the deeper orange to stay above the WCAG AA contrast ratio. */
.aspect-btn.active,
.btn-download {
  background: var(--primary-strong) !important;
  border-color: var(--primary-strong) !important;
  color: #FFFFFF !important;
}