/* ==========================================================================
   Design tokens
   Every colour, size and motion value used across the site starts here.
   ========================================================================== */

:root {
  /* --- Brand palette, sampled directly from the logo artwork -------------- */
  --brand-steel: #343c46;   /* Shree Jee Electricals dark */
  --brand-red: #c12520;     /* Shree Jee Electricals red */
  --cinni-red: #ee1c25;     /* Cinni red */
  --cinni-ink: #3c3b3b;     /* Cinni FANS badge */

  /* --- Neutral ramp ------------------------------------------------------ */
  --ink-1000: #080a0d;
  --ink-900: #0e1116;
  --ink-800: #141922;
  --ink-700: #1b212b;
  --ink-600: #252d39;
  --ink-500: #343c46;
  --ink-400: #4d5766;
  --ink-300: #75808f;
  --ink-200: #a4adb9;
  --ink-100: #d5dbe3;
  --mist-100: #eef1f5;
  --mist-50: #f6f8fa;
  --paper: #ffffff;

  /* --- Accent ramp ------------------------------------------------------- */
  --red-700: #9c1c18;
  --red-600: #c12520;
  --red-500: #d92b25;
  --red-400: #ee1c25;
  --red-300: #f56a63;
  --red-tint: rgba(238, 28, 37, 0.12);

  /* --- Semantic ---------------------------------------------------------- */
  --bg: var(--paper);
  --bg-alt: var(--mist-50);
  --bg-dark: var(--ink-900);
  --surface: var(--paper);
  --text: var(--ink-800);
  --text-soft: var(--ink-400);
  --text-muted: #616b7a; /* 5.4:1 on white, safe for the smallest type */
  --text-on-dark: #f4f6f9;
  --text-on-dark-soft: rgba(244, 246, 249, 0.66);
  --line: rgba(52, 60, 70, 0.14);
  --line-strong: rgba(52, 60, 70, 0.24);
  --line-dark: rgba(244, 246, 249, 0.14);
  --accent: var(--red-600);
  --accent-bright: var(--red-400);
  --focus: #4c9aff;

  /* --- Typography --------------------------------------------------------
     Three families, three jobs, no overlap.

     Cabinet Grotesk  display   headlines and figures. An engineered grotesk
                                with flat terminals that echoes the cut corners
                                of the SJE monogram.
     Switzer          text      body copy. Swiss neutral, wide aperture, holds
                                its texture down to 13px.
     Supreme          technical eyebrows, labels, buttons, specifications. Its
                                squared skeleton matches the logo lettering and
                                reads like instrument marking.
     ---------------------------------------------------------------------- */
  --font-display: 'Cabinet Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Switzer', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-technical: 'Supreme', 'Cabinet Grotesk', system-ui, sans-serif;

  /* Modular scale, 1.26 on mobile opening to 1.33 on desktop. */
  --step--2: clamp(0.6875rem, 0.665rem + 0.11vw, 0.75rem);
  --step--1: clamp(0.8125rem, 0.785rem + 0.14vw, 0.8875rem);
  --step-0: clamp(0.9375rem, 0.905rem + 0.16vw, 1.03125rem);
  --step-1: clamp(1.09375rem, 1.03rem + 0.32vw, 1.28125rem);
  --step-2: clamp(1.3125rem, 1.175rem + 0.69vw, 1.71875rem);
  --step-3: clamp(1.59375rem, 1.33rem + 1.32vw, 2.375rem);
  --step-4: clamp(1.9375rem, 1.47rem + 2.34vw, 3.3125rem);
  --step-5: clamp(2.3125rem, 1.53rem + 3.9vw, 4.625rem);
  --step-6: clamp(2.75rem, 1.35rem + 7vw, 6.875rem);

  /* Leading, tuned per role rather than one global value. */
  --leading-display: 0.96;
  --leading-tight: 1.02;
  --leading-snug: 1.14;
  --leading-title: 1.26;
  --leading-lede: 1.5;
  --leading-normal: 1.7;
  --leading-compact: 1.55;

  /* Optical tracking. Large type needs negative, small caps need positive. */
  --tracking-display: -0.038em;
  --tracking-tight: -0.028em;
  --tracking-snug: -0.018em;
  --tracking-normal: -0.006em;
  --tracking-label: 0.09em;
  --tracking-wide: 0.15em;
  --tracking-widest: 0.22em;

  /* --- Space scale ------------------------------------------------------- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --section-y: clamp(4rem, 3rem + 6vw, 8.5rem);
  --shell: 1240px;
  --shell-wide: 1440px;
  --shell-narrow: 820px;
  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 2.75rem);

  /* --- Radii and edges --------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --chamfer: 18px; /* echoes the cut corners in the SJE monogram */

  /* --- Elevation --------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(14, 17, 22, 0.06);
  --shadow-sm: 0 2px 10px rgba(14, 17, 22, 0.07);
  --shadow-md: 0 12px 30px -12px rgba(14, 17, 22, 0.22);
  --shadow-lg: 0 30px 60px -25px rgba(14, 17, 22, 0.35);
  --shadow-red: 0 18px 40px -18px rgba(193, 37, 32, 0.55);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* --- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 620ms;
  --dur-reveal: 900ms;

  /* --- Layers ------------------------------------------------------------ */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 60;
  --z-header: 80;
  --z-drawer: 90;
  --z-modal: 100;
  --z-veil: 120;
}

/* Sections rendered on the dark ink background flip the semantic colours. */
.on-dark {
  --bg: var(--ink-900);
  --surface: rgba(255, 255, 255, 0.04);
  --text: var(--text-on-dark);
  --text-soft: rgba(244, 246, 249, 0.72);
  --text-muted: rgba(244, 246, 249, 0.58);
  --line: rgba(244, 246, 249, 0.12);
  --line-strong: rgba(244, 246, 249, 0.22);
  --accent: var(--red-400);
  color: var(--text);
  background-color: var(--bg);
}