/* ==========================================================================
   Pulseive design tokens: System B
   Source: the 6 System B mockups only (2.1, 2.2, 2.3, 3.1, 3.2, 4).
   Hex values were measured from mockup pixels on 2026-09-18.
   Brand: "Pulseive" as a plain text wordmark, no icon.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Caveat:wght@600;700&display=swap");

:root {
  /* ---- Brand (orange-red) ---------------------------------------------- */
  --color-brand:          #D93831;  /* AA ruling 2026-09-19: white text 4.60:1. Mockups measure #FD5C50 (3.08:1); same OKLCH hue/chroma, lightness 0.686 -> 0.586 */
  --color-brand-hover:    #CC2A26;  /* white text 5.35:1 */
  --color-brand-press:    #C0191A;  /* white text 6.19:1 */
  --color-brand-text:     #CA2824;  /* red text on light surfaces: active tab/nav, rank numbers, arrows, eyebrows. AA ruling 2026-09-19: >=4.53:1 on every light surface (was #E8453A, 3.25-3.93:1) */
  --color-brand-on-dark:  #F67A68;  /* measured: coral accent word in dark-hero serif titles */
  --color-brand-soft:     #FFEDEA;  /* icon tint bg, hover rows */
  --color-brand-border:   #FBC9C2;

  /* ---- Navy (utility bar, hero, footer, headings) ---------------------- */
  --color-navy-950:       #0E2338;  /* measured: footer / utility bar (company page) */
  --color-navy-900:       #142A40;  /* dark stat panel, dark promo */
  --color-navy-800:       #182F47;  /* measured: utility bar / footer (industries hub) */
  --color-navy-700:       #244064;  /* measured: hero photo-overlay midtone */
  --color-heading:        #0B1A4A;  /* measured core of section titles: deep navy-indigo */

  /* ---- Accents on dark -------------------------------------------------- */
  --color-teal-on-dark:   #8FD6DE;  /* measured: hero eyebrow "UAE INDUSTRY INTELLIGENCE" */
  --color-teal-muted:     #5BA3AE;  /* measured: utility-bar label */

  /* ---- Neutrals --------------------------------------------------------- */
  --color-text:           #3B4863;  /* body copy */
  --color-muted:          #6B7890;  /* subtitles, meta, captions */
  --color-subtle:         #9AA5B8;  /* placeholders, counts */
  --color-border:         #E3E8EF;  /* card and panel borders, dividers */
  --color-border-strong:  #CBD3DE;  /* inputs, secondary buttons */
  --color-surface:        #FFFFFF;
  --color-surface-alt:    #F7F8FA;  /* page background between panels */
  --color-surface-tint:   #F0F4F8;  /* measured: "Key insights" box, table header */
  --color-link:           #2563C9;  /* inline blue links ("View on Google Maps", website) */

  /* ---- On-dark text ----------------------------------------------------- */
  --color-on-dark:        #FFFFFF;
  --color-on-dark-muted:  #C5CFDD;
  --color-on-dark-subtle: #8B9BB3;
  --color-on-dark-border: rgba(255, 255, 255, 0.14);
  --color-glass:          rgba(255, 255, 255, 0.08);  /* dark search bar, glass stat panel */

  /* ---- Data viz --------------------------------------------------------- */
  --color-data-1:         #1C78B4;  /* measured: donut lead slice */
  --color-data-2:         #5480A6;  /* measured: horizontal bars */
  --color-data-3:         #8FB0D0;
  --color-data-4:         #C8D6E6;  /* measured: donut light slices */
  --color-data-accent:    #F8946C;  /* measured: donut orange slices */
  --color-data-accent-2:  #F6B89C;
  --color-data-track:     #E8F0F4;  /* measured: bar track */

  /* ---- Status + tiers --------------------------------------------------- */
  --color-success:        #16A34A;
  --color-success-soft:   #E7F6EC;
  --color-tier-1:         var(--color-brand-text);   /* rank 1–3 / Tier 1 */
  --color-tier-1-soft:    var(--color-brand-soft);
  --color-tier-2:         var(--color-data-1);       /* Tier 2 */
  --color-tier-2-soft:    #E3EFF8;
  --color-tier-3:         var(--color-muted);        /* Tier 3 */
  --color-tier-3-soft:    var(--color-surface-tint);

  /* ---- Gradients -------------------------------------------------------- */
  --gradient-hero:        linear-gradient(95deg, rgba(14,35,56,.97) 0%, rgba(20,42,64,.88) 42%, rgba(36,64,100,.35) 100%);
  --gradient-cta-band:    linear-gradient(100deg, #FCE5DC 0%, #FBE9E3 55%, #F9EFEC 100%);  /* measured #FCE5DC */

  /* ---- Typography ------------------------------------------------------- */
  --font-sans:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif:  "Fraunces", Georgia, "Times New Roman", serif;  /* page titles, CTA headline, research-note titles */
  --font-script: "Caveat", "Segoe Script", cursive;              /* hero tagline decal only */

  --text-display: 3.25rem;   /* 52px  hero H1 (serif) */
  --text-h1:      2.5rem;    /* 40px  hero H1 on tablet, company name */
  --text-h2:      1.75rem;   /* 28px  CTA band headline (serif) */
  --text-h3:      1.25rem;   /* 20px  section title */
  --text-h4:      1.0625rem; /* 17px  card title, research-note title */
  --text-h5:      0.9375rem; /* 15px  compact card title */
  --text-lede:    1.0625rem; /* 17px  hero paragraph */
  --text-body:    0.9375rem; /* 15px */
  --text-sm:      0.8125rem; /* 13px  meta, table cells, link lists */
  --text-xs:      0.75rem;   /* 12px  counts, tags, captions */
  --text-2xs:     0.6875rem; /* 11px  eyebrows, table head */
  --text-stat:    1.625rem;  /* 26px  KPI numbers */
  --text-stat-lg: 1.375rem;  /* 22px  hero stat-panel numbers */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  --leading-tight:  1.08;
  --leading-snug:   1.3;
  --leading-normal: 1.55;

  --tracking-display: -0.01em;
  --tracking-eyebrow:  0.1em;

  /* ---- Spacing (4px base) ----------------------------------------------- */
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */

  /* ---- Layout ----------------------------------------------------------- */
  --container-max:    1200px;
  --container-gutter: var(--space-6);
  --sidebar-width:    300px;   /* right rail: sector connections, company details */
  --filter-width:     250px;   /* left filter rail */
  --utility-height:   36px;
  --header-height:    64px;
  --hero-panel-width: 360px;
  --grid-gap:         var(--space-4);

  /* ---- Radius (System B is tighter than A) ------------------------------ */
  --radius-xs:   4px;   /* tags */
  --radius-sm:   6px;   /* buttons, inputs, tabs */
  --radius-md:   8px;   /* cards, list rows, FAQ rows */
  --radius-lg:   12px;  /* panels, hero stat panel, CTA band */
  --radius-pill: 999px;
  --radius-full: 50%;   /* icon discs, monograms */

  /* ---- Shadows ---------------------------------------------------------- */
  --shadow-xs:    0 1px 2px rgba(14, 35, 56, 0.05);
  --shadow-card:  0 1px 2px rgba(14, 35, 56, 0.04), 0 6px 18px rgba(14, 35, 56, 0.06);
  --shadow-panel: 0 24px 48px -20px rgba(6, 18, 32, 0.55);  /* white stat panel on dark hero */
  --ring-focus:   0 0 0 3px rgba(217, 56, 49, 0.3);  /* --color-brand at 30% */

  /* ---- Motion / z ------------------------------------------------------- */
  --ease:          cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 120ms;
  --duration:      200ms;
  --z-sticky: 10;
  --z-header: 20;
}

/* ---- Breakpoints (reference only; custom properties can't be used in @media)
   640px  sm   phones: single column, 16px gutter
   768px  md   hero panel stacks under copy; 4-col strips → 2-col
   1024px lg   right rail drops below content; nav collapses to menu button
   1280px xl   full desktop
   ------------------------------------------------------------------------- */

/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-surface-alt);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { margin: 0; color: var(--color-heading); line-height: var(--leading-snug); font-weight: var(--weight-bold); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-xs); }

.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter); }
@media (max-width: 640px) { :root { --container-gutter: var(--space-4); } }