/* ==========================================================================
   Design tokens — himanshubijalwan.com (new site)
   Brand colours are owner-supplied; neutrals are slate (blue lean, to sit
   with the ink). Components use semantic tokens only, never raw values.
   ========================================================================== */

:root {
  /* Brand */
  --blue-600: #2563EB;   /* primary */
  --blue-700: #1D4ED8;   /* hover */
  --blue-800: #1E40AF;   /* active */
  --ink-900:  #0F172A;   /* dark ink */
  --ink-950:  #020617;   /* deepest ink: footer foreground ridge */
  --teal-500: #14B8A6;   /* accent (7.2:1 on ink) */

  /* Neutrals */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --paper:     #FDFDFE;   /* near-white surface */
  --canvas:    #F3F5F8;   /* page background */
  --warm-50:   #F8F6F1;   /* home hero paper */
  --amber-500: #F59E0B;   /* review stars */

  /* Semantic */
  --color-bg:            var(--canvas);
  --color-surface:       var(--paper);
  --color-text:          var(--ink-900);
  --color-text-muted:    var(--slate-600);
  --color-border:        var(--slate-200);
  --color-primary:       var(--blue-600);
  --color-primary-hover: var(--blue-700);
  --color-primary-active:var(--blue-800);
  --color-on-primary:    var(--paper);
  --color-primary-soft:  rgb(37 99 235 / 0.08);
  --color-focus:         var(--blue-600);
  --color-focus-on-ink:  #93C5FD;

  /* Type — one family; the width axis tightens the uppercase name */
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Display serif for section headlines that ask for it (06, 09): an 11 KB subset, base.css. */
  --font-serif: "Newsreader Display", Georgia, "Times New Roman", serif;
  /* Handwritten asides (section notes): system hands only, zero bytes downloaded. */
  --font-hand: "Bradley Hand", "Segoe Print", "Chalkboard SE", "Comic Neue", cursive;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  /* Shadows — ink-tinted, never grey-black */
  --shadow-bar:   0 18px 40px -24px rgb(15 23 42 / 0.28), 0 2px 6px -2px rgb(15 23 42 / 0.06);
  --shadow-stuck: 0 14px 34px -18px rgb(15 23 42 / 0.30), 0 1px 3px rgb(15 23 42 / 0.06);
  --shadow-panel: 0 28px 60px -28px rgb(15 23 42 / 0.35), 0 4px 12px -4px rgb(15 23 42 / 0.08);

  /* Motion — short and quiet; reduced motion switches it off in base.css */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 140ms;
  --t-base: 220ms;

  /* Layers */
  --z-header: 100;

  /* Header geometry (mobile first; overridden at breakpoints below) */
  --util-h: 44px;
  --bar-h: 64px;
  --hdr-gap: 0px;
  --hdr-inset: 0px;
  --hdr-r: 0px;
  --hdr-pad: 16px;
  --hdr-max: 1440px;
}

@media (min-width: 768px) {
  :root {
    --util-h: 40px;
    --bar-h: 72px;
    --hdr-pad: 24px;
  }
}

/* Full-width header (owner, 2026-09-28): no floating gap, inset or radius at any
   width; only the content padding grows. Hero/footer read the same variables. */
@media (min-width: 1024px) {
  :root {
    --hdr-pad: 32px;
  }
}

@media (min-width: 1280px) {
  :root {
    --bar-h: 80px;
    --hdr-pad: 40px;
  }
}

/* Phones: no utility bar (ChatGPT review 2026-09-29: first-screen noise). Phone, email and
   socials stay in the mobile menu, the footer and /contact/. */
@media (max-width: 639.98px) {
  :root { --util-h: 0px; }
}