/* ============================================================
   TECH WAY TRADING FZE — Core Color & Type Foundations
   Professional lighting · audio · video · cabling reseller
   Dubai · Jebel Ali Free Zone
   ------------------------------------------------------------
   Brand model: MONOCHROME foundation (black + white, like the
   logo) lit by a vivid "stage-light" SPECTRUM used sparingly.
   The product surfaces default to a DARK stage-black theme;
   a LIGHT "paper" theme is provided for documents/letterhead.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700&family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Brand families -------------------------------------- */
  --font-display: 'Jost', 'Century Gothic', 'Futura', sans-serif; /* geometric — matches the TECH WAY wordmark */
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ============================================================
     MONOCHROME — the spine of the brand
     ============================================================ */
  --tw-black:   #000000;   /* stage black — primary canvas        */
  --tw-ink:     #0A0A0B;   /* near-black ink for paper            */
  --tw-white:   #FFFFFF;   /* logo white                          */

  /* Dark-theme surfaces (default product theme) */
  --bg-0: #000000;         /* full-bleed stage black              */
  --bg-1: #0A0A0C;         /* app background                      */
  --bg-2: #131318;         /* raised card                         */
  --bg-3: #1C1C23;         /* hover / nested card                 */
  --bg-4: #26262F;         /* input / control                     */

  /* Hairlines & dividers on dark */
  --line-1: rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.14);
  --line-3: rgba(255,255,255,0.22);

  /* Text on dark */
  --fg-1: #FFFFFF;         /* primary text                        */
  --fg-2: #B7B7C2;         /* secondary / body                    */
  --fg-3: #76767F;         /* muted / captions                    */
  --fg-4: #4A4A52;         /* disabled / faint                    */

  /* Neutral grey ramp (theme-agnostic) */
  --grey-50:  #F5F5F7;
  --grey-100: #E6E6EA;
  --grey-200: #C9C9D0;
  --grey-300: #A3A3AD;
  --grey-400: #76767F;
  --grey-500: #54545C;
  --grey-600: #3A3A41;
  --grey-700: #26262C;
  --grey-800: #18181C;
  --grey-900: #0E0E11;

  /* ============================================================
     STAGE-LIGHT SPECTRUM — vivid accents, used like beams.
     Pull from the brand's stage-lighting imagery. Use ONE
     dominant accent per surface; keep saturation for moments.
     ============================================================ */
  --violet:  #8B3DFF;      /* PRIMARY accent                      */
  --violet-bright: #A56BFF;
  --violet-dim:    #5A24B0;
  --magenta: #E12AFB;
  --cyan:    #1FE0E6;
  --blue:    #2D7DFF;
  --amber:   #FF8A1F;
  --green:   #2FE08A;

  /* Primary accent aliases */
  --accent:        var(--violet);
  --accent-bright: var(--violet-bright);
  --accent-dim:    var(--violet-dim);
  --accent-contrast: #FFFFFF;   /* text on accent fills           */

  /* Spectrum gradient — the signature "beam sweep" */
  --beam-sweep: linear-gradient(100deg, #8B3DFF 0%, #E12AFB 34%, #2D7DFF 66%, #1FE0E6 100%); /* @kind color */
  --beam-warm:  linear-gradient(100deg, #FF8A1F 0%, #E12AFB 100%); /* @kind color */
  /* Protection gradient for laying text over bright stage photos */
  --scrim-bottom: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0) 100%); /* @kind color */
  --scrim-full:   linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.1) 100%); /* @kind color */

  /* ============================================================
     SEMANTIC / STATUS
     ============================================================ */
  --success: #2FE08A;
  --warning: #FF8A1F;
  --danger:  #FF4D4D;
  --info:    #2D7DFF;

  /* ============================================================
     LIGHT "PAPER" THEME (documents, letterhead, invoices)
     ============================================================ */
  --paper:   #FFFFFF;
  --paper-2: #F5F5F7;
  --ink-1:   #0A0A0B;
  --ink-2:   #4A4A52;
  --ink-3:   #8A8A92;
  --paper-line: rgba(0,0,0,0.10);

  /* ============================================================
     RADII — restrained. Hardware-precise, not pill-soft.
     ============================================================ */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ============================================================
     ELEVATION — shadows read on dark via glow + depth
     ============================================================ */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.6);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.55);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.65);
  --glow-accent: 0 0 0 1px rgba(139,61,255,0.5), 0 8px 40px rgba(139,61,255,0.35);
  --glow-soft:   0 0 60px rgba(139,61,255,0.25);

  /* ============================================================
     SPACING — 4px base grid
     ============================================================ */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --sp-32: 128px;

  /* Layout */
  --container: 1200px;
  --container-wide: 1400px;

  /* Motion — confident, no bounce. Like a moving head fixture. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur: 240ms; /* @kind other */
  --dur-slow: 480ms; /* @kind other */
}

/* ============================================================
   TYPE SYSTEM
   Display: Jost (geometric, wide-tracked caps — the wordmark)
   Body:    Hanken Grotesk
   ============================================================ */

/* Hero / display — geometric, light weight, generous tracking */
.tw-display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.tw-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: 0.01em;
}
.tw-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: 0.012em;
}
.tw-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.tw-h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: 0;
}

/* Overline / eyebrow — the brand's signature wide-tracked label */
.tw-overline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--fg-2);
}

.tw-lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--fg-2);
}
.tw-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg-2);
}
.tw-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg-3);
}
.tw-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--fg-3);
}
.tw-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--fg-2);
}

/* Wordmark lockup helper — TECH WAY in spaced geometric caps */
.tw-wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  line-height: 1;
}