/* Fox Auth — design tokens.
   Brand source of truth: FoxAuth/fox-auth-design-guidelines.md
   Color block lifted from FoxAuth/fox-auth-brand-preview.html. */
:root{
  /* ---- Color: warm Fox Auth palette ---- */
  --fox:#FF6B35;        /* Primary brand: fills, large display, icons, ring, Scout body */
  --ember:#E8521C;      /* Hover / pressed; white-on-orange only at >=18px bold */
  --apricot:#FFE3D4;    /* Soft tints, illustration backgrounds */
  --midnight:#17181D;   /* Primary text, dark surfaces, Scout nose/paws */
  --slate:#5B5F6B;      /* Secondary text, captions */
  --belly:#FFF6EF;      /* Page background (default canvas) */
  --cloud:#FFFFFF;      /* Cards / raised surfaces */
  --green:#18B26B;      /* Success / verified */
  --sky:#3D7DFF;        /* Links / informational accents */
  --amber:#FFB020;      /* Warnings, countdown ring under 5s */
  --red:#E5484D;        /* Errors / security alerts (rare) */
  --line:#ECE6DF;       /* Borders / dividers on warm bg */

  /* Gradient orange (matches the dashboard mockup) */
  --grad:linear-gradient(180deg,#FF8A3D,#EE4F1C);
  --grad-h:linear-gradient(180deg,#FF6B35,#E8521C);

  /* ---- Type families (brand + system fallbacks) ---- */
  --sans:"General Sans","Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --body:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono","JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* ---- Type scale (fluid) ---- */
  --fs-h1:clamp(2.5rem, 5vw + 1rem, 4rem);
  --fs-h2:clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
  --fs-h3:1.375rem;
  --fs-lead:clamp(1.1rem, 0.6vw + 1rem, 1.3rem);
  --fs-body:1.0625rem;   /* ~17px */
  --fs-small:0.8125rem;  /* ~13px */
  --lh-tight:1.08;
  --lh-body:1.6;
  --measure:68ch;        /* 60-75 char line length */

  /* ---- Spacing: 8px grid ---- */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px;
  --s5:48px; --s6:64px; --s7:96px; --s8:128px;

  /* ---- Radii ---- */
  --r-card:12px;   /* cards */
  --r-btn:10px;    /* buttons + inputs */
  --r-pill:999px;  /* tags */
  --r-tile:22px;   /* app-icon tile */

  /* ---- Layout ---- */
  --maxw:1120px;
  --gutter:24px;

  /* ---- Effects ---- */
  --shadow-sm:0 1px 2px rgba(23,24,29,.06);
  --shadow:0 8px 28px rgba(23,24,29,.08);
  --shadow-lg:0 20px 50px rgba(23,24,29,.13);
  --focus:0 0 0 3px rgba(255,107,53,.5);   /* Fox Orange focus ring */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);

  /* ---- Glassmorphism (Apple-style) ---- */
  --glass-bg:linear-gradient(157deg, rgba(255,255,255,.86), rgba(255,246,239,.62));
  --glass-bg-strong:linear-gradient(157deg, rgba(255,255,255,.94), rgba(255,243,235,.86));
  --glass-border:rgba(255,255,255,.75);
  --glass-hairline:rgba(23,24,29,.06);
  --glass-shadow:0 10px 34px rgba(23,24,29,.09), inset 0 1px 0 rgba(255,255,255,.65);
  --glass-shadow-lg:0 22px 60px rgba(23,24,29,.13), inset 0 1px 0 rgba(255,255,255,.7);
  --glass-blur:saturate(180%) blur(20px);
  --r-glass:16px;

  /* ---- Z-index scale ---- */
  --z-nav:50;
  --z-dropdown:40;
  --z-toast:80;
}