/* =========================================================================
   Callstack — Core Type + Color Tokens
   Source: design.md + Figma file Callstack AI (3.5)
   Dual-theme: dark (default on home/hero sections) and light (subpages).
   ========================================================================= */

/* ---------- Fonts ---------- */
@font-face{font-family:"Alliance No.2";src:url("fonts/AllianceNo2-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Alliance No.2";src:url("fonts/AllianceNo2-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Alliance No.2";src:url("fonts/AllianceNo2-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Alliance No.2";src:url("fonts/AllianceNo2-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Switzer";src:url("fonts/Switzer-Variable.ttf") format("truetype-variations");font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:"Switzer";src:url("fonts/Switzer-VariableItalic.ttf") format("truetype-variations");font-weight:100 900;font-style:italic;font-display:swap;}
@font-face{font-family:"Geist Mono";src:url("fonts/GeistMono-VariableFont_wght.ttf") format("truetype-variations");font-weight:100 900;font-style:normal;font-display:swap;}

/* ---------- Root tokens (light theme — subpages) ---------- */
:root{
  /* Font families */
  --cs-font-display: "Alliance No.2", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --cs-font-body: "Switzer", "Inter", ui-sans-serif, system-ui, sans-serif;
  --cs-font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Raw palette — shared */
  --cs-black: #000000;
  --cs-white: #FFFFFF;
  --cs-accent: #8232FF;                 /* brand purple — imagery / glow only */
  --cs-accent-shadow: rgba(130,50,255,.2);
  --cs-neutral-light: #CFCED5;
  --cs-neutral-darkest: #201F24;
  --cs-neutral-darkest-40: #15141566;

  /* Light theme semantic (default) */
  --cs-bg: #FFFFFF;
  --cs-bg-alt: #FCFBF9;                 /* subtle warm off-white */
  --cs-bg-dark-insert: #000000;         /* strategic dark sections */
  --cs-surface: #FFFFFF;
  --cs-surface-subtle: rgba(0,0,0,.04); /* nested panels */
  --cs-text-primary: #000000;
  --cs-text-secondary: rgba(0,0,0,.60);
  --cs-text-tertiary: rgba(0,0,0,.40);
  --cs-text-disabled: rgba(0,0,0,.24);
  --cs-border: rgba(0,0,0,.08);         /* primary hairline */
  --cs-border-strong: rgba(0,0,0,.16);  /* secondary button outline */
  --cs-border-inner: rgba(0,0,0,.04);   /* nested frames */
  --cs-fg-primary: rgba(0,0,0,.04);     /* icon tint inside primary buttons */
  --cs-fg-secondary: rgba(0,0,0,.04);

  /* Button roles (light surface) */
  --cs-btn-primary-bg: #000000;
  --cs-btn-primary-fg: #FFFFFF;
  --cs-btn-primary-icon-tint: rgba(255,255,255,.24);
  --cs-btn-secondary-border: rgba(0,0,0,.16);
  --cs-btn-secondary-fg: #000000;

  /* Radii, stroke, measure */
  --cs-radius-sm: 2px;
  --cs-radius-md: 4px;
  --cs-stroke: 1px;
  --cs-measure: 640px;                  /* max reading column */

  /* Spacing scale (4px grid) */
  --cs-space-1: 4px;
  --cs-space-2: 8px;
  --cs-space-3: 12px;
  --cs-space-4: 16px;
  --cs-space-5: 24px;
  --cs-space-6: 32px;
  --cs-space-7: 40px;
  --cs-space-8: 48px;
  --cs-space-9: 64px;
  --cs-space-10: 80px;
  --cs-space-11: 120px;

  /* Signature grain overlay used on AI imagery — no drop-shadow anywhere */
  --cs-grain: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px) 0 0 / 2px 2px;

  /* Type scale — desktop */
  --cs-h1: 500 60px/1.1 var(--cs-font-display);
  --cs-h2: 500 44px/1.1 var(--cs-font-display);
  --cs-h3: 500 36px/1.1 var(--cs-font-display);
  --cs-h4: 500 22px/1.2 var(--cs-font-display);
  --cs-h5: 500 20px/1.2 var(--cs-font-display);
  --cs-tagline: 500 12px/20px var(--cs-font-mono);
  --cs-text-md-normal: 400 18px/1.5 var(--cs-font-body);
  --cs-text-md-medium: 500 18px/1.5 var(--cs-font-body);
  --cs-text-rg-normal: 400 16px/1.5 var(--cs-font-body);
  --cs-text-rg-medium: 500 16px/1.5 var(--cs-font-body);
  --cs-text-sm-normal: 400 14px/1.5 var(--cs-font-body);
  --cs-text-sm-medium: 500 14px/1.5 var(--cs-font-body);
  --cs-text-xs-normal: 400 12px/1.5 var(--cs-font-body);
  --cs-text-xs-medium: 500 12px/1.5 var(--cs-font-body);

  /* Letter-spacing */
  --cs-track-display: -0.04em;
  --cs-track-body: 0;
  --cs-track-mono: 0;
}

/* ---------- Dark theme — opt in with [data-theme="dark"] or .cs-dark ---------- */
[data-theme="dark"], .cs-dark{
  --cs-bg: #000000;
  --cs-bg-alt: #0A0A0A;
  --cs-bg-dark-insert: #FFFFFF;
  --cs-surface: #000000;
  --cs-surface-subtle: rgba(255,255,255,.04);
  --cs-text-primary: #FFFFFF;
  --cs-text-secondary: rgba(255,255,255,.60);
  --cs-text-tertiary: rgba(255,255,255,.40);
  --cs-text-disabled: rgba(255,255,255,.24);
  --cs-border: rgba(255,255,255,.08);
  --cs-border-strong: rgba(255,255,255,.16);
  --cs-border-inner: rgba(255,255,255,.04);
  --cs-fg-primary: rgba(0,0,0,.04);
  --cs-fg-secondary: #838289;
  --cs-btn-primary-bg: #FFFFFF;
  --cs-btn-primary-fg: #000000;
  --cs-btn-primary-icon-tint: rgba(0,0,0,.08);
  --cs-btn-secondary-border: rgba(255,255,255,.16);
  --cs-btn-secondary-fg: #FFFFFF;
}

/* ---------- Base / semantic element styles ---------- */
body{
  background: var(--cs-bg);
  color: var(--cs-text-primary);
  font: var(--cs-text-rg-normal);
  letter-spacing: var(--cs-track-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5{margin:0;color:var(--cs-text-primary);letter-spacing:var(--cs-track-display);}
h1{font: var(--cs-h1);}
h2{font: var(--cs-h2);}
h3{font: var(--cs-h3);}
h4{font: var(--cs-h4);}
h5{font: var(--cs-h5);}
p{margin:0;font: var(--cs-text-rg-normal);letter-spacing:var(--cs-track-body);color:var(--cs-text-primary);}

/* ---------- Utility classes ---------- */
.cs-tagline{font: var(--cs-tagline);letter-spacing:var(--cs-track-mono);color:var(--cs-text-tertiary);text-transform:uppercase;}
.cs-lede{font: var(--cs-text-md-normal);letter-spacing:var(--cs-track-body);color:var(--cs-text-primary);max-width:var(--cs-measure);}
.cs-meta{font: var(--cs-text-sm-normal);letter-spacing:var(--cs-track-body);color:var(--cs-text-secondary);}
.cs-mono{font: var(--cs-tagline);letter-spacing:var(--cs-track-mono);}
.cs-measure{max-width: var(--cs-measure);}
.cs-hairline{border-top: var(--cs-stroke) solid var(--cs-border);}
.cs-hairline-v{border-left: var(--cs-stroke) solid var(--cs-border);}

/* Grain texture — used over AI imagery panels only */
.cs-grain{position:relative;}
.cs-grain::after{content:"";position:absolute;inset:0;pointer-events:none;background: var(--cs-grain);mix-blend-mode:overlay;opacity:.4;}

/* Diamond point — tiny rotated square used as section connector */
.cs-point{width:8px;height:8px;background:currentColor;transform:rotate(45deg);display:inline-block;}