/* ============================================
   tokens.css — Tex Cars brand design tokens
   Brand identity (from the logo): Blue · Orange · Navy.
   The UI palette below is a softened, more premium take on those
   brand colors: a deeper cobalt instead of electric blue, a warmer
   coral instead of hot orange, and calmer gradients/glows. The logo
   keeps its original bright colors; the site simply sits quieter
   around it. Logo source values live in brand-kit/colors/colors.md.
   ============================================ */
:root {
  /* ---- Brand (softened UI palette) ---- */
  --brand-blue:   #2348C7;
  --brand-blue-600:#1C3AA1;
  --brand-blue-700:#152C7A;
  --brand-orange: #F15F2C;
  --brand-orange-600:#D84E1F;
  --brand-navy:   #15192F;
  --brand-black:  #0a0c16;
  --white:        #FFFFFF;

  /* ---- Tints / neutrals ---- */
  --blue-50:   #EFF3FC;
  --blue-100:  #DCE5F6;
  --orange-50: #FBF2EE;
  --ink:       #15192F;
  --ink-soft:  #4a5170;
  --ink-mute:  #828aa6;
  --line:      #e6e9f2;
  --surface:   #f7f8fc;
  --surface-2: #eef1f8;

  /* ---- Gradients / glows (softened: cobalt settling into navy) ---- */
  --grad-hero: radial-gradient(120% 120% at 80% -10%, #3157CC 0%, #2348C7 42%, #15192F 100%);
  --grad-band: linear-gradient(120deg, #2348C7 0%, #15192F 100%);
  --glow-orange: 0 18px 50px -18px rgba(241,95,44,.32);
  --glow-blue:   0 18px 50px -18px rgba(35,72,199,.30);

  /* ---- Typography ---- */
  --font-display: "Anton", "Archivo", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.16em;

  /* fluid type scale */
  --fs-eyebrow: .8rem;
  --fs-body:   clamp(1rem, .96rem + .2vw, 1.125rem);
  --fs-lead:   clamp(1.125rem, 1rem + .6vw, 1.4rem);
  --fs-h3:     clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
  --fs-h2:     clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  --fs-h1:     clamp(2.8rem, 1.6rem + 5.4vw, 6rem);

  /* ---- Layout ---- */
  --container: 1200px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --radius: 16px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --section-y: clamp(4rem, 3rem + 6vw, 8rem);

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(21,25,47,.06), 0 2px 8px rgba(21,25,47,.05);
  --shadow-md: 0 10px 30px -12px rgba(21,25,47,.18);
  --shadow-lg: 0 30px 60px -20px rgba(21,25,47,.28);

  --ease: cubic-bezier(.22,.61,.36,1);
}