/* =============================================================================
   Nexzend Design System — Foundations
   Two-mode canvas: true black storytelling / pure white catalogue
   ============================================================================= */

/* Body — Inter (open-source, Google Fonts) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
/* Display — General Sans (Fontshare, free) — closest open-source match to Aeonik Pro */
@import url("https://api.fontshare.com/v2/css?f[]=general-sans@500,600,700&display=swap");

:root {
  /* ---------- BRAND -------------------------------------------------------- */
  --color-primary:         #494fdf;   /* cobalt violet — the one brand stamp */
  --color-primary-bright:  #4f55f1;   /* link colour in dark photo headers   */
  --color-primary-deep:    #3a40c4;   /* pressed state                        */
  --color-on-primary:      #ffffff;

  /* ---------- SURFACE / CANVAS -------------------------------------------- */
  --color-canvas-light:    #ffffff;
  --color-canvas-dark:     #000000;   /* TRUE black. Never #0a0a0a as canvas */
  --color-surface-soft:    #f4f4f4;
  --color-surface-card:    #ffffff;
  --color-surface-deep:    #0a0a0a;
  --color-surface-elevated:#16181a;   /* plan cards on dark band             */

  --color-hairline-light:  #e2e2e7;
  --color-hairline-dark:   rgba(255,255,255,0.12);
  --color-hairline-strong: #191c1f;

  /* ---------- TEXT -------------------------------------------------------- */
  --color-ink:        #191c1f;        /* primary text on light               */
  --color-body:       #1f2226;
  --color-charcoal:   #3a3d40;
  --color-mute:       #505a63;
  --color-ash:        #5c5e60;
  --color-stone:      #8d969e;
  --color-faint:      #c9c9cd;
  --color-on-dark:        #ffffff;
  --color-on-dark-mute:   rgba(255,255,255,0.72);

  /* ---------- ACCENT — ILLUSTRATIONS / ICONOGRAPHY ONLY ------------------- */
  --color-accent-teal:        #00a87e;
  --color-accent-light-blue:  #007bc2;
  --color-accent-blue-link:   #376cd5;
  --color-accent-light-green: #428619;
  --color-accent-green-text:  #006400;
  --color-accent-yellow:      #b09000;
  --color-accent-warning:     #ec7e00;
  --color-accent-pink:        #e61e49;
  --color-accent-danger:      #e23b4a;
  --color-accent-deep-red:    #8b0000;
  --color-accent-brown:       #936d62;
  --color-link:               #376cd5;

  /* ---------- TYPE FAMILIES ----------------------------------------------- */
  /* Display: Aeonik Pro is proprietary — using General Sans 500 (Fontshare) as
     the closest open-source approximation. Apply -1% tracking on display sizes
     regardless of font choice. */
  --font-display: "General Sans", "Inter", "Söhne", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- TYPE TOKENS ------------------------------------------------- */
  /* display sizes always weight 500, lineHeight 1.0, negative tracking */
  --type-display-xxl-size:   136px; --type-display-xxl-lh: 1.0;  --type-display-xxl-ls:  -2.72px;
  --type-display-xl-size:     80px; --type-display-xl-lh:  1.0;  --type-display-xl-ls:   -0.80px;
  --type-display-lg-size:     48px; --type-display-lg-lh:  1.21; --type-display-lg-ls:   -0.48px;
  --type-display-md-size:     40px; --type-display-md-lh:  1.20; --type-display-md-ls:   -0.40px;
  --type-heading-lg-size:     32px; --type-heading-lg-lh:  1.19; --type-heading-lg-ls:   -0.32px;
  --type-heading-md-size:     24px; --type-heading-md-lh:  1.33; --type-heading-md-ls:    0;
  --type-heading-sm-size:     20px; --type-heading-sm-lh:  1.40; --type-heading-sm-ls:    0;
  --type-body-lg-size:        18px; --type-body-lg-lh:     1.56; --type-body-lg-ls:      -0.09px;
  --type-body-md-size:        16px; --type-body-md-lh:     1.50; --type-body-md-ls:       0.24px;
  --type-body-sm-size:        14px; --type-body-sm-lh:     1.43; --type-body-sm-ls:       0;
  --type-caption-size:        13px; --type-caption-lh:     1.40; --type-caption-ls:       0;

  /* ---------- SPACING ----------------------------------------------------- */
  --space-xxs:    4px;
  --space-xs:     6px;
  --space-sm:     8px;
  --space-md:    14px;
  --space-lg:    16px;
  --space-xl:    24px;
  --space-xxl:   32px;
  --space-xxxl:  48px;
  --space-block: 80px;
  --space-section: 88px;
  --space-band: 120px;

  /* ---------- RADIUS ------------------------------------------------------ */
  --rounded-none: 0px;
  --rounded-sm:   8px;
  --rounded-md:  12px;
  --rounded-lg:  20px;
  --rounded-xl:  28px;
  --rounded-full: 9999px;

  /* ---------- LAYOUT ------------------------------------------------------ */
  --content-max: 1200px;

  /* ---------- ELEVATION (none — surface-luminance shifts only) ------------ */
  --shadow-none: none;
}

/* =============================================================================
   Base resets + body defaults
   ============================================================================= */
html, body {
  background: var(--color-canvas-light);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

/* =============================================================================
   Display type — General Sans 500 with tight tracking
   ============================================================================= */
.display-xxl, h1.display-xxl,
.display-xl,  h1.display-xl,
.display-lg,  h2.display-lg,
.display-md,  h3.display-md,
.heading-lg,  h3.heading-lg,
.heading-md,  h4.heading-md,
.heading-sm,  h5.heading-sm {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}

.display-xxl { font-size: var(--type-display-xxl-size); line-height: var(--type-display-xxl-lh); letter-spacing: var(--type-display-xxl-ls); }
.display-xl  { font-size: var(--type-display-xl-size);  line-height: var(--type-display-xl-lh);  letter-spacing: var(--type-display-xl-ls); }
.display-lg  { font-size: var(--type-display-lg-size);  line-height: var(--type-display-lg-lh);  letter-spacing: var(--type-display-lg-ls); }
.display-md  { font-size: var(--type-display-md-size);  line-height: var(--type-display-md-lh);  letter-spacing: var(--type-display-md-ls); }
.heading-lg  { font-size: var(--type-heading-lg-size);  line-height: var(--type-heading-lg-lh);  letter-spacing: var(--type-heading-lg-ls); }
.heading-md  { font-size: var(--type-heading-md-size);  line-height: var(--type-heading-md-lh);  letter-spacing: var(--type-heading-md-ls); }
.heading-sm  { font-size: var(--type-heading-sm-size);  line-height: var(--type-heading-sm-lh);  letter-spacing: var(--type-heading-sm-ls); }

/* clamped responsive flagship — 136 → 80 → 64 → 48 across breakpoints */
.display-xxl--clamp {
  font-size: clamp(48px, 9.4vw, 136px);
  line-height: 1.0;
  letter-spacing: -0.02em;
}

/* =============================================================================
   Body type — Inter, positive tracking on UI labels
   ============================================================================= */
.body-lg       { font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-lh); letter-spacing: var(--type-body-lg-ls); font-weight: 400; font-family: var(--font-body); }
.body-md       { font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh); letter-spacing: var(--type-body-md-ls); font-weight: 400; font-family: var(--font-body); }
.body-md-bold  { font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh); letter-spacing: 0.16px;                 font-weight: 600; font-family: var(--font-body); }
.body-sm       { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); letter-spacing: var(--type-body-sm-ls); font-weight: 400; font-family: var(--font-body); }
.caption       { font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: var(--type-caption-ls); font-weight: 400; font-family: var(--font-body); }

/* button-label classes */
.btn-label-lg  { font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 1.4; letter-spacing: 0; }
.btn-label-md  { font-family: var(--font-body);    font-weight: 600; font-size: 16px; line-height: 1.5; letter-spacing: 0.24px; }
.btn-label-sm  { font-family: var(--font-body);    font-weight: 600; font-size: 14px; line-height: 1.43; letter-spacing: 0; }

/* emphatic inline link in dark photo headers */
.link-emph     { font-weight: 700; letter-spacing: 0.24px; color: var(--color-primary-bright); text-decoration: none; }
a.link         { color: var(--color-link); text-decoration: none; }
a.link:hover   { text-decoration: underline; }

/* =============================================================================
   Canvas helpers
   ============================================================================= */
.canvas-dark  { background: var(--color-canvas-dark);  color: var(--color-on-dark); }
.canvas-light { background: var(--color-canvas-light); color: var(--color-ink); }

.band         { padding-block: var(--space-section); }
.band--hero   { padding-block: var(--space-band); }

.container    { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-xl); }