/* ==========================================================================
   FONTS, SERVED FROM THIS SITE
   Loaded from Google Fonts, every page waited on a second server before
   it could draw any text: about 0.9 s on a phone. The same files now live
   in public/fonts, and only the character sets a page uses are fetched.
   ========================================================================== */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   SAWARIYA METAL INDUSTRIES - DESIGN TOKENS
   Single source of truth for colour, type, spacing, depth and motion.
   Palette is derived from the official logo: royal blue (dominant),
   red (accent only), metallic silver (engineering surfaces), white, dark neutral.
   Never hardcode a colour in a component file. Always reference a token.
   ========================================================================== */

:root {
  /* ---- BRAND: BLUE (dominant) ------------------------------------------ */
  --blue-50:  #EEF4FF;
  --blue-100: #D9E5FD;
  --blue-200: #B4CAFA;
  --blue-300: #7FA5F3;
  --blue-400: #4A7CE4;
  --blue-500: #1F57CC;
  --blue-600: #1152C4;  /* logo "S" highlight */
  --blue-700: #0B3E97;  /* logo ring - primary brand blue */
  --blue-800: #092F73;
  --blue-900: #07224F;
  --blue-950: #04142F;

  /* ---- ACTION BLUE (the accent: buttons, markers, rules) ---------------

     Deliberately brighter and more saturated than the primary navy, so an
     action reads as an action next to it without introducing a second hue.
     500 and 600 both clear 4.5:1 against white text.
     --------------------------------------------------------------------- */
  --accent-50:  #EAF4FF;
  --accent-100: #D2E7FF;
  --accent-200: #A9D0FF;
  --accent-300: #6FB0FB;
  --accent-400: #338CF2;
  --accent-500: #0B6BDC;
  --accent-600: #0A56B4;
  --accent-700: #08428B;

  /* ---- BRAND: RED (error and danger states only) -----------------------

     The logo swoosh is red, and the logo keeps it. Nothing else does: red on
     a button or a heading competes with the brand blue and, worse, spends the
     one colour a visitor reads as "something is wrong". It is reserved here
     for exactly that.
     --------------------------------------------------------------------- */
  --red-50:  #FFF1F1;
  --red-100: #FFDEDF;
  --red-200: #FFC0C2;
  --red-300: #F8898D;
  --red-400: #EE4E55;
  --red-500: #D91A20;  /* logo swoosh - brand red */
  --red-600: #BC1319;
  --red-700: #971015;
  --red-800: #720C10;
  --red-900: #4D080B;

  /* ---- BRAND: METALLIC SILVER (communicates steel) --------------------- */
  --steel-50:  #F7F9FB;
  --steel-100: #F2F4F6;  /* specular highlight */
  --steel-200: #E4E8EC;
  --steel-300: #C3CAD2;  /* mid metal */
  --steel-400: #A2ACB7;
  --steel-500: #8A939E;  /* metal shadow */
  --steel-600: #6B7480;
  --steel-700: #5A6472;
  --steel-800: #3D4552;
  --steel-900: #242B36;
  --steel-950: #0E1726;  /* dark neutral */

  /* ---- METALLIC GRADIENTS (brushed steel surfaces) --------------------- */
  --grad-steel: linear-gradient(145deg, var(--steel-100) 0%, var(--steel-300) 38%, var(--steel-500) 62%, var(--steel-200) 100%);
  --grad-steel-edge: linear-gradient(90deg, var(--steel-400), var(--steel-100), var(--steel-400));
  --grad-blue: linear-gradient(145deg, var(--blue-600) 0%, var(--blue-700) 55%, var(--blue-900) 100%);
  --grad-blue-sheen: linear-gradient(115deg, var(--blue-600) 0%, var(--blue-500) 45%, var(--blue-700) 100%);
  --grad-accent: linear-gradient(120deg, var(--accent-500), var(--accent-600));

  /* ---- SEMANTIC (light theme default) ---------------------------------- */
  --color-primary: var(--blue-700);
  --color-on-primary: #FFFFFF;
  --color-primary-hover: var(--blue-800);

  --color-accent: var(--accent-500);
  --color-on-accent: #FFFFFF;
  --color-accent-hover: var(--accent-600);

  --color-background: #FFFFFF;
  --color-surface: var(--steel-50);
  --color-surface-raised: #FFFFFF;
  --color-foreground: var(--steel-950);
  --color-muted: var(--steel-200);
  --color-muted-foreground: var(--steel-700);
  --color-border: var(--steel-200);
  --color-border-strong: var(--steel-300);
  --color-ring: var(--blue-600);

  --color-success: #0F7B4F;
  --color-warning: #9A5B00;
  --color-danger: var(--red-600);
  --color-info: var(--blue-600);

  /* ---- GLASS (use selectively: navbar, overlays, panels, modals) ------- */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-hairline: rgba(11, 62, 151, 0.10);
  --glass-blur: 18px;
  --glass-blur-strong: 28px;

  /* ---- OVERLAYS (keep uploaded background media readable) -------------- */
  --overlay-soft: linear-gradient(180deg, rgba(4, 20, 47, 0.32), rgba(4, 20, 47, 0.62));
  --overlay-hero: linear-gradient(105deg, rgba(4, 20, 47, 0.82) 0%, rgba(7, 34, 79, 0.55) 45%, rgba(4, 20, 47, 0.25) 100%);
  --overlay-scrim: rgba(4, 20, 47, 0.55);

  /* ---- TYPOGRAPHY ------------------------------------------------------ */
  --font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --text-xs:   0.75rem;   /* 12px - captions, table units only */
  --text-sm:   0.875rem;  /* 14px - meta, labels */
  --text-base: 1rem;      /* 16px - body minimum, never smaller */
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-hero: clamp(2.25rem, 1.2rem + 4.2vw, 4.5rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.14em;

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ---- SPACING (4px base) ---------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  /* Reduced from a 7.5rem maximum: the old rhythm left visible voids
     between sections on a 1440px screen. */
  --section-y: clamp(2.75rem, 1.75rem + 3.2vw, 4.75rem);
  --gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem);

  /* ---- LAYOUT ---------------------------------------------------------- */
  --container: 1280px;
  --container-wide: 1520px;
  --container-prose: 72ch;
  --navbar-h: 76px;
  --navbar-h-scrolled: 62px;
  --touch-target: 44px;   /* accessibility minimum */

  /* ---- RADIUS ---------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ---- DEPTH (industrial, layered - not flat) -------------------------- */
  --shadow-xs: 0 1px 2px rgba(4, 20, 47, 0.06);
  --shadow-sm: 0 2px 6px rgba(4, 20, 47, 0.08);
  --shadow-md: 0 8px 20px -4px rgba(4, 20, 47, 0.14);
  --shadow-lg: 0 18px 40px -10px rgba(4, 20, 47, 0.20);
  --shadow-xl: 0 32px 64px -16px rgba(4, 20, 47, 0.28);
  --shadow-float: 0 12px 32px -8px rgba(4, 20, 47, 0.22), 0 2px 6px rgba(4, 20, 47, 0.08);
  --shadow-inset-metal: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(4, 20, 47, 0.10);
  --shadow-focus: 0 0 0 3px rgba(17, 82, 196, 0.45);

  /* ---- TECHNICAL GRID (engineering drawing texture) -------------------- */
  --grid-line: rgba(11, 62, 151, 0.07);
  --grid-size: 44px;
  --pattern-grid: linear-gradient(var(--grid-line) 1px, transparent 1px),
                  linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);

  /* ---- MOTION ---------------------------------------------------------- */
  --dur-instant: 90ms;
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;
  --dur-cinematic: 800ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-metal: cubic-bezier(0.34, 1.26, 0.64, 1);

  /* ---- Z-INDEX SCALE --------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-navbar: 1000;
  --z-drawer: 1100;
  --z-modal: 1200;
  --z-toast: 1300;
  --z-tooltip: 1400;
}

/* ==========================================================================
   DARK THEME
   Opt-in via [data-theme="dark"], plus honouring the OS preference.
   ========================================================================== */
:root[data-theme="dark"] {
  --color-background: var(--blue-950);
  --color-surface: #081A38;
  --color-surface-raised: #0B2148;
  --color-foreground: var(--steel-100);
  --color-muted: #13305C;
  --color-muted-foreground: var(--steel-300);
  --color-border: #143565;
  --color-border-strong: #1D4585;
  --color-primary: var(--blue-400);
  --color-on-primary: var(--blue-950);
  --color-primary-hover: var(--blue-300);
  --color-accent: var(--accent-400);
  --color-on-accent: #041428;
  --color-accent-hover: var(--accent-300);
  --color-ring: var(--blue-300);
  --glass-bg: rgba(8, 26, 56, 0.66);
  --glass-bg-strong: rgba(8, 26, 56, 0.86);
  --glass-border: rgba(122, 165, 243, 0.20);
  --glass-hairline: rgba(122, 165, 243, 0.14);
  --grid-line: rgba(122, 165, 243, 0.09);
  --shadow-focus: 0 0 0 3px rgba(127, 165, 243, 0.55);
}

/* ==========================================================================
   NOTE ON DARK MODE

   This site does NOT follow the operating system colour scheme. It is a white
   site by decision: the brand is blue on white, and auto-switching to a dark
   theme turned the whole page navy for anyone whose laptop happened to be in
   dark mode, which buried the blue and was not what was wanted.

   The dark tokens above still exist and still work. They apply only when
   something explicitly sets data-theme="dark" on the html element. Nothing in
   the site does that today, so every visitor sees the white theme.
   ========================================================================== */

/* ==========================================================================
   REDUCED MOTION - collapse every duration to near-zero so that any
   component built on these tokens becomes still without extra code.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-cinematic: 1ms;
  }
}