/* =========================================================================
   Zenduit Design System — Colors & Type
   Single source of truth. Import this in any prototype/page.
   ========================================================================= */

/* ---------- Webfonts ----------
   Helvetica Neue only. We declare each weight as a separate @font-face,
   trying local() copies of system Helvetica Neue first (Apple devices),
   then falling back to the supplied .ttc collection / .ttf files.
   FLAG: please send standalone Light, Regular, and Medium .ttf files —
   the .ttc collection doesn't split reliably in most browsers, so on
   Windows/Linux those weights currently fall back to system Helvetica
   or Arial. */

@font-face {
  font-family: "Helvetica Neue";
  src: local("HelveticaNeue-Light"), local("HelveticaNeue Light"), local("Helvetica Neue Light");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("HelveticaNeue"), local("HelveticaNeue-Regular"), local("Helvetica Neue");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("HelveticaNeue-Medium"), local("HelveticaNeue Medium"), local("Helvetica Neue Medium");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("HelveticaNeue-Bold"), local("HelveticaNeue Bold"),
       url("fonts/HelveticaNeue-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("HelveticaNeue-Heavy"), local("HelveticaNeue Heavy"),
       url("fonts/HelveticaNeue-Heavy.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("HelveticaNeue-HeavyItalic"),
       url("fonts/HelveticaNeue-HeavyItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue Cond";
  src: url("fonts/HelveticaNeue-Cond.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ===================== BRAND PALETTE (raw, never themed) ===================== */
:root {
  --zenduit-blue:      #136AB6; /* primary brand */
  --black-pearl:       #000F2B; /* dark canvas */
  --soft-white:        #F4F6FB; /* brand canvas — softer than #FFFFFF */
  --pure-white:        #FFFFFF; /* utility · also the spark on dark */
  --baltic-sea:        #262626; /* body neutral */

  /* Primary scale (anchored at 600 = Zenduit Blue — single hue ladder) */
  --primary-25:        #F4F8FD;
  --primary-50:        #E8F1FA;
  --primary-100:       #C9DFF2;
  --primary-200:       #94BFE5;
  --primary-400:       #3E89C7;
  --primary-500:       #2078C0;
  --primary-600:       #136AB6;  /* base — = Zenduit Blue */
  --primary-700:       #0F569A;
  --primary-800:       #0A406E;
  --primary-900:       #000F2B;

  /* ---------- Shape accents ---------- */
  /* The three shapes (Data / Insights / Strategies) get their own accent
     hues. Use sparingly: a shape's fill, a category dot, a chart series. */
  --shape-data:        #68C8B4;  /* ⬢ Hexagon · Fleet Data */
  --shape-insight:     #FFC466;  /* ◼ Square  · Insights   */
  --shape-strategy:    #F4674F;  /* ●  Circle  · Strategies */

  /* ---------- Type ---------- */
  --font-sans: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
  --font-cond: "Helvetica Neue Cond", "Helvetica Neue", Arial Narrow, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Menlo", monospace;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-bold:     700;
  --fw-heavy:    800;

  /* Type scale */
  --fs-display:  96px;
  --fs-h1:       48px;
  --fs-h2:       36px;
  --fs-h3:       24px;
  --fs-body-l:   18px;
  --fs-body:     16px;
  --fs-caption:  13px;

  --lh-display:  1.05;
  --lh-h1:       1.10;
  --lh-h2:       1.20;
  --lh-h3:       1.30;
  --lh-body:     1.60;

  --tr-display:  -0.02em;
  --tr-h1:       -0.015em;
  --tr-h2:       -0.01em;
  --tr-caption:  0.08em;

  /* Spacing scale (4px base) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;   /* default button */
  --radius-lg: 12px;  /* default card */
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Borders */
  --border-thin: 1px;
  --border-base: 1.5px;
  --border-thick: 2px;

  /* Motion */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ============================ LIGHT THEME (default) ============================ */
:root,
[data-theme="light"] {
  /* Brand */
  --color-brand:            #136AB6;
  --color-brand-hover:      #0F569A;
  --color-brand-pressed:    #0A406E;
  --color-brand-subtle:     #E8F1FA;
  --color-accent:           #FFFFFF;  /* the spark — pure white on dark sections */
  --color-accent-on:        #000F2B;

  /* Surfaces */
  --color-bg:               #F8FAFD;  /* subtle off-white canvas */
  --color-bg-subtle:        #F2F5FA;
  --color-bg-muted:         #EAEEF6;
  --color-surface:          #FFFFFF;  /* cards pop slightly above canvas */
  --color-surface-elevated: #FFFFFF;
  --color-overlay:          rgba(0, 15, 43, 0.55);

  /* Text */
  --color-text:             #3D4A60;
  --color-text-strong:      #000F2B;
  --color-text-muted:       #6B7A93;
  --color-text-subtle:      #94A3BA;
  --color-text-on-brand:    #FFFFFF;
  --color-text-on-accent:   #000F2B;
  --color-text-link:        #136AB6;
  --color-text-link-hover:  #0F569A;

  /* Borders */
  --color-border:           #D8DEE9;
  --color-border-strong:    #B3BFD1;
  --color-border-brand:     #136AB6;
  --color-divider:          #EAEEF6;

  /* Status — drawn from the shape accents */
  --color-success:          #68C8B4;
  --color-warning:          #FFC466;
  --color-danger:           #F4674F;
  --color-info:             #136AB6;

  /* Shadows */
  --shadow-sm:    0 1px 2px rgba(0, 15, 43, 0.06);
  --shadow-md:    0 4px 12px rgba(0, 15, 43, 0.08);
  --shadow-lg:    0 12px 32px rgba(0, 15, 43, 0.12);
  --shadow-brand: 0 8px 24px rgba(19, 106, 182, 0.25);
}

/* ============================ DARK THEME ============================ */
[data-theme="dark"] {
  --color-brand:            #136AB6;
  --color-brand-hover:      #3E89C7;
  --color-brand-pressed:    #2078C0;
  --color-brand-subtle:     rgba(19, 106, 182, 0.15);
  --color-accent:           #FFFFFF;
  --color-accent-on:        #000F2B;

  --color-bg:               #000F2B;
  --color-bg-subtle:        #06183A;
  --color-bg-muted:         #0E2247;
  --color-surface:          #0A1C40;
  --color-surface-elevated: #122B55;
  --color-overlay:          rgba(0, 7, 20, 0.72);

  --color-text:             #E6ECF5;
  --color-text-strong:      #FFFFFF;
  --color-text-muted:       #A8B5CC;
  --color-text-subtle:      #6E7E9A;
  --color-text-on-brand:    #FFFFFF;
  --color-text-on-accent:   #000F2B;
  --color-text-link:        #5BA0D6;
  --color-text-link-hover:  #FFFFFF;

  --color-border:           #1E3260;
  --color-border-strong:    #2C4680;
  --color-border-brand:     #136AB6;
  --color-divider:          #14274D;

  --color-success:          #68C8B4;
  --color-warning:          #FFC466;
  --color-danger:           #F4674F;
  --color-info:             #3E89C7;

  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg:    0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-brand: 0 8px 24px rgba(255, 255, 255, 0.18); /* White lift on dark */
}

/* ============================ ELEMENT DEFAULTS ============================ */
html, body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--color-text-strong);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
}
h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
}
h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-h3);
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  text-wrap: pretty;
  margin: 0;
}

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--color-text-link-hover); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

::selection {
  background: var(--color-brand);
  color: var(--color-text-on-brand);
}

/* ============================ UTILITY HELPERS ============================ */
.zd-display { font-size: var(--fs-display); font-weight: var(--fw-medium); letter-spacing: var(--tr-display); line-height: var(--lh-display); }
.zd-body-l  { font-size: var(--fs-body-l); }
.zd-caption {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-caption);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.zd-stat {
  font-size: 72px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-brand);
}