/* Foodrazor Design System — colors + type foundations
 * Source: Foodrazor Brand Guide.pptx + live product screenshots
 *
 * Usage:
 *   <link rel="stylesheet" href="fonts/fonts.css">
 *   <link rel="stylesheet" href="colors_and_type.css">
 */

@import url('./fonts/fonts.css');

:root {
  /* =========================================================
   * BRAND CORE COLORS (from brand guide)
   * These are the seven swatches explicitly documented in the
   * brand guide. Product UI uses slightly warmer variants in
   * places — see extended palette below.
   * ========================================================= */
  --fr-blue:    #4D7CFE;   /* Primary action / links / active nav */
  --fr-purple:  #983BBD;   /* Secondary accent / approval states */
  --fr-red:     #F73731;   /* Destructive / errors / price up */
  --fr-green:   #1BA975;   /* Success / completed / price stable */
  --fr-orange:  #FF822E;   /* Warning / action needed */
  --fr-gray:    #6C7995;   /* Body muted / secondary text */
  --fr-ink:     #252631;   /* Primary heading / body text */

  /* =========================================================
   * PRIMITIVE PALETTE — tints + shades used in product
   * Observed from live screens; keep in sync with product.
   * ========================================================= */

  /* Neutrals — cool grey scale that reads slightly blue */
  --fr-white:        #FFFFFF;
  --fr-neutral-50:   #FAFBFC;  /* page background */
  --fr-neutral-100:  #F5F7FA;  /* subtle section fills */
  --fr-neutral-200:  #F0F2F5;  /* input backgrounds */
  --fr-neutral-300:  #E2E6ED;  /* dividers, borders */
  --fr-neutral-400:  #C4CAD4;  /* disabled borders */
  --fr-neutral-500:  #9AA3B2;  /* placeholder text */
  --fr-neutral-600:  #6C7995;  /* secondary text (alias of --fr-gray) */
  --fr-neutral-700:  #4A5468;  /* strong body */
  --fr-neutral-800:  #323747;  /* headings on light */
  --fr-neutral-900:  #252631;  /* highest contrast (alias of --fr-ink) */

  /* Blue scale */
  --fr-blue-50:   #EEF3FF;
  --fr-blue-100:  #DCE6FF;
  --fr-blue-200:  #B5C8FE;
  --fr-blue-400:  #6D93FE;
  --fr-blue-500:  #4D7CFE;   /* base */
  --fr-blue-600:  #3C66DA;
  --fr-blue-700:  #2C4FB0;

  /* Green scale */
  --fr-green-50:   #E6F7F0;
  --fr-green-100:  #C6EDDB;
  --fr-green-500:  #1BA975;  /* base */
  --fr-green-600:  #148A5F;
  --fr-green-700:  #0F6A49;

  /* Red scale */
  --fr-red-50:    #FEECEB;
  --fr-red-100:   #FCD4D2;
  --fr-red-500:   #F73731;  /* base */
  --fr-red-600:   #D42621;

  /* Orange / amber scale */
  --fr-orange-50:  #FFF1E6;
  --fr-orange-100: #FFDCC0;
  --fr-orange-500: #FF822E;  /* base */
  --fr-orange-600: #E06412;

  /* Purple scale */
  --fr-purple-50:   #F5E9FB;
  --fr-purple-100:  #E6CEF5;
  --fr-purple-500:  #983BBD;  /* base */
  --fr-purple-600:  #7A2A99;

  /* =========================================================
   * SEMANTIC TOKENS — prefer these in components
   * ========================================================= */

  /* Surfaces */
  --bg-app:       var(--fr-neutral-50);
  --bg-surface:   var(--fr-white);
  --bg-subtle:    var(--fr-neutral-100);
  --bg-muted:     var(--fr-neutral-200);
  --bg-inverse:   var(--fr-neutral-900);

  /* Foreground / text */
  --fg-primary:   var(--fr-neutral-900);   /* #252631 — headings & body */
  --fg-secondary: var(--fr-neutral-600);   /* #6C7995 — labels, captions */
  --fg-tertiary:  var(--fr-neutral-500);   /* placeholder, disabled */
  --fg-inverse:   var(--fr-white);
  --fg-link:      var(--fr-blue-500);

  /* Borders */
  --border-subtle:  var(--fr-neutral-200);
  --border-default: var(--fr-neutral-300);
  --border-strong:  var(--fr-neutral-400);
  --border-focus:   var(--fr-blue-500);

  /* Accent / brand */
  --accent:        var(--fr-blue-500);
  --accent-hover:  var(--fr-blue-600);
  --accent-press:  var(--fr-blue-700);
  --accent-soft:   var(--fr-blue-50);

  /* Status — paired fg + soft-bg */
  --success-fg:  var(--fr-green-600);
  --success-bg:  var(--fr-green-50);
  --danger-fg:   var(--fr-red-600);
  --danger-bg:   var(--fr-red-50);
  --warning-fg:  var(--fr-orange-600);
  --warning-bg:  var(--fr-orange-50);
  --info-fg:     var(--fr-blue-600);
  --info-bg:     var(--fr-blue-50);
  --approval-fg: var(--fr-purple-600);
  --approval-bg: var(--fr-purple-50);

  /* =========================================================
   * TYPOGRAPHY — families
   * ========================================================= */
  --font-display: 'Manrope', 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:    'DM Sans', 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — modular, closely tied to product */
  --fs-display:  40px;
  --fs-h1:       32px;   /* page titles (e.g. "Overview", "Products") */
  --fs-h2:       24px;
  --fs-h3:       20px;
  --fs-h4:       18px;
  --fs-body:     14px;   /* default UI body */
  --fs-body-lg:  16px;   /* marketing / onboarding body */
  --fs-sm:       13px;   /* labels, captions */
  --fs-xs:       11px;   /* micro — table column headers, pill labels */

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;   /* uppercase pills, table headers */

  /* =========================================================
   * SPACING — 4px base grid
   * ========================================================= */
  --space-0:  0;
  --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;
  --space-20: 80px;

  /* =========================================================
   * RADII — soft, contemporary — never fully rounded except
   * for pills and avatars
   * ========================================================= */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;    /* default — buttons, inputs */
  --radius-lg:   12px;   /* cards */
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* =========================================================
   * SHADOWS — subtle, never heavy; product favors borders + faint shadow
   * ========================================================= */
  --shadow-xs: 0 1px 2px rgba(37, 38, 49, 0.04);
  --shadow-sm: 0 1px 3px rgba(37, 38, 49, 0.06), 0 1px 2px rgba(37, 38, 49, 0.04);
  --shadow-md: 0 4px 8px rgba(37, 38, 49, 0.06), 0 2px 4px rgba(37, 38, 49, 0.04);
  --shadow-lg: 0 12px 24px rgba(37, 38, 49, 0.08), 0 4px 8px rgba(37, 38, 49, 0.04);
  --shadow-pop: 0 20px 40px rgba(37, 38, 49, 0.12);

  /* Focus ring — accessible blue halo */
  --ring-focus: 0 0 0 3px rgba(77, 124, 254, 0.25);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;
}

/* =========================================================
 * SEMANTIC ELEMENT DEFAULTS
 * Opt in by adding class "fr-type" to a container.
 * ========================================================= */

.fr-type,
.fr-type * {
  font-family: var(--font-body);
  color: var(--fg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fr-type h1, .fr-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
  margin: 0;
}

.fr-type h2, .fr-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
  margin: 0;
}

.fr-type h3, .fr-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
  margin: 0;
}

.fr-type h4, .fr-h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
  margin: 0;
}

.fr-type p, .fr-p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
  margin: 0;
}

.fr-type small, .fr-caption {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--fg-secondary);
  line-height: var(--lh-normal);
}

.fr-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-secondary);
}

.fr-code, .fr-type code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-muted);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
}

.fr-type a, .fr-link {
  color: var(--fg-link);
  text-decoration: none;
  font-weight: var(--fw-medium);
}
.fr-type a:hover, .fr-link:hover { text-decoration: underline; }


/* Footer social icons */
.footer-social { display: flex; gap: 10px; }
.footer-brand .footer-social { margin-top: 18px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 9px;
  border: 1px solid var(--border-default);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-secondary);
  transition: all var(--dur-base) var(--ease-out);
}
.footer-social a:hover { color: var(--fg-primary); border-color: var(--border-strong); background: var(--bg-subtle); }
.footer-social svg { width: 17px; height: 17px; }

/* GTM <noscript> fallback: hide only when JS is on (keeps the no-JS pixel working). */
@media (scripting: enabled) { noscript { display: none !important; } }