/* iAmAI design tokens, black & white system v1 (18 Oct 2026)
   Replaces the navy/cyan palette of ../tokens.css for the marketing site (approved by Yosef: "fully black and white").
   shadcn/ui variable names (Tailwind v4 / shadcn "new-york": use var(--primary) directly).
   Rule: the page is white, text is near-black, greys carry hierarchy. The ONLY colour is the AI ring/glow around the main input.
   Status colours (destructive/success/warning) exist for product UI only (errors, form validation), never as decoration.
   Every text pair is checked in contrast-report-bw.md (WCAG 2.2 AA). */

@font-face { font-family: "Rubik"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/rubik-300.woff2") format("woff2"); }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/rubik-400.woff2") format("woff2"); }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/rubik-500.woff2") format("woff2"); }

:root {
  /* ---- raw neutral scale ---- */
  --ink: #0a0a0a;          /* text, primary buttons, logo */
  --grey-800: #262626;     /* strong secondary text */
  --grey-700: #404040;
  --grey-600: #5c5c5c;     /* muted text (min. grey for text on white/#fafafa/#f5f5f5) */
  --grey-500: #8a8a8a;     /* input borders, icons: 3:1 non-text only, NOT for text */
  --grey-300: #d4d4d4;     /* strong hairline, outline buttons */
  --grey-200: #e5e5e5;     /* hairline */
  --grey-100: #f5f5f5;     /* chips, muted fills */
  --grey-50:  #fafafa;     /* subtle section background */
  --paper: #ffffff;

  /* ---- the one colour moment: AI ring + glow (logo sky, blue, lilac, logo green, soft yellow) ---- */
  --ai-sky: #86d2fe;
  --ai-blue: #5b7cff;
  --ai-lilac: #a78bfa;
  --ai-green: #3cf59a;
  --ai-sun: #ffd27a;
  --ai-ring: conic-gradient(from 210deg, var(--ai-sky), var(--ai-blue), var(--ai-lilac), var(--ai-green), var(--ai-sun), var(--ai-sky));
  --ai-ring-width: 1.6px;
  --ai-glow:
    radial-gradient(34% 48% at 28% 55%, #cdeaff, transparent 72%),
    radial-gradient(30% 44% at 74% 52%, #d4f8e6, transparent 72%),
    radial-gradient(28% 40% at 52% 78%, #e4dcff, transparent 72%),
    radial-gradient(22% 30% at 60% 30%, #fff1d6, transparent 72%);
  --ai-glow-blur: 50px;

  /* ---- semantic (shadcn/ui) ---- */
  --background: var(--paper);
  --background-subtle: var(--grey-50);
  --foreground: var(--ink);
  --card: var(--paper);
  --card-foreground: var(--ink);
  --popover: var(--paper);
  --popover-foreground: var(--ink);
  --primary: var(--ink);
  --primary-foreground: var(--paper);
  --primary-hover: #262626;
  --secondary: var(--grey-100);
  --secondary-foreground: var(--grey-800);
  --muted: var(--grey-100);
  --muted-foreground: var(--grey-600);
  --accent: var(--grey-100);
  --accent-foreground: var(--ink);
  --link: var(--ink);                /* links are underlined, not coloured */
  --border: var(--grey-200);
  --border-strong: var(--grey-300);
  --input: var(--grey-500);          /* 3.4:1 on white, meets 1.4.11 */
  --input-hairline: #8f8f8f;         /* 1px inset line inside the AI ring: 3.23:1 on white, so the input boundary meets 1.4.11 on its own */
  --ring: var(--ink);                /* focus outline */
  --destructive: #b91c1c;
  --destructive-foreground: var(--paper);
  --success: #15803d;
  --success-foreground: var(--paper);
  --warning-text: #92400e;
  --chart-1: var(--ink);
  --chart-2: var(--grey-600);
  --chart-3: var(--grey-500);
  --chart-4: var(--grey-300);
  --chart-5: var(--grey-200);
  --sidebar: var(--grey-50);
  --sidebar-foreground: var(--ink);
  --sidebar-primary: var(--ink);
  --sidebar-primary-foreground: var(--paper);
  --sidebar-accent: var(--grey-100);
  --sidebar-accent-foreground: var(--ink);
  --sidebar-border: var(--grey-200);
  --sidebar-ring: var(--ink);

  /* ---- radius: pills and big soft cards ---- */
  --radius: 0.875rem;                      /* 14px */
  --radius-sm: 0.625rem;                   /* 10px */
  --radius-md: 0.75rem;
  --radius-lg: 1.125rem;                   /* 18px: small cards */
  --radius-xl: 1.75rem;                    /* 28px: result card, input box */
  --radius-full: 9999px;                   /* buttons, chips */

  /* ---- typography ---- */
  --font-sans: "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-weight-light: 300;   /* display + hero only, >= 24px */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --text-xs: 0.8125rem; /* 13 */
  --text-sm: 0.875rem;  /* 14 */
  --text-base: 1rem;    /* 16 */
  --text-lg: 1.125rem;  /* 18 */
  --text-xl: 1.3125rem; /* 21 input text */
  --text-3xl: 2.25rem;  /* 36 section titles */
  --text-hero: 4rem;    /* 64 desktop hero, 40 on mobile */
  --text-hero-mobile: 2.5rem;
  --tracking-hero: -0.025em;
  --leading-hero: 1.1;
  --leading-body: 1.55;

  /* ---- elevation (neutral shadows, no tint) ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.12);
  --shadow-input: 0 1px 2px rgba(60,64,67,.08), 0 12px 40px -12px rgba(60,64,67,.25);

  /* ---- layout ---- */
  --nav-height: 4.25rem;
  --target-min: 2.75rem;
  --ease-out: cubic-bezier(.2,.8,.2,1);
}

html { scroll-padding-top: calc(var(--nav-height) + 1rem); }
body { background: var(--background); color: var(--foreground); font-family: var(--font-sans); line-height: var(--leading-body); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }