/* ──────────────────────────────────────────────────────────────
   Founding Creative — Design Tokens
   Source of truth: imported Figma library + brand kit.
   ────────────────────────────────────────────────────────────── */

/* ── Typefaces ─────────────────────────────────────────────── */
@font-face {
  font-family: 'Gelica';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('../fonts/Gelica-ExtraLight.otf') format('opentype');
}
@font-face {
  font-family: 'Gelica';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/Gelica-Light.otf') format('opentype');
}
@font-face {
  font-family: 'Gelica';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Gelica-Regular.otf') format('opentype');
}
@font-face {
  font-family: 'Gelica';
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url('../fonts/Gelica-ExtraLightItalic.otf') format('opentype');
}
@font-face {
  font-family: 'Gelica';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/Gelica-LightItalic.otf') format('opentype');
}
@font-face {
  font-family: 'Gelica';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Gelica-Italic.otf') format('opentype');
}
@font-face {
  font-family: 'Gelica';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Gelica-Medium.otf') format('opentype');
}
@font-face {
  font-family: 'Gelica';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Gelica-MediumItalic.otf') format('opentype');
}
@font-face {
  font-family: 'Gelica';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Gelica-SemiBold.otf') format('opentype');
}
@font-face {
  font-family: 'Gelica';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Gelica-SemiBoldItalic.otf') format('opentype');
}
@font-face {
  font-family: 'Gelica';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Gelica-Bold.otf') format('opentype');
}
@font-face {
  font-family: 'Gelica';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Gelica-BoldItalic.otf') format('opentype');
}
@font-face {
  font-family: 'Gelica';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/Gelica-Black.otf') format('opentype');
}
@font-face {
  font-family: 'Gelica';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/Gelica-BlackItalic.otf') format('opentype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/Manrope-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/Manrope.ttf') format('truetype-variations');
}

:root {
  /* ── Primitive · Neutrals ───────────────────────────────── */
  --n-lightest: #F2F2F2;
  --n-lighter:  #D8D8D8;
  --n-light:    #B2B2B2;
  --n-base:     #7F7F7F;
  --n-dark:     #4C4C4C;
  --n-darker:   #252424;  /* page hero bg */
  --n-ink:      #1C1C1E;  /* foreground surface on dark scheme */
  --n-black:    #000000;
  --white:      #FFFFFF;

  /* ── Primitive · Mint Green (primary accent) ────────────── */
  --mint-lighter:  #E5FDE9;
  --mint-light:    #A4FAB3;
  --mint:          #7EF893;   /* signature accent */
  --mint-dark:     #64C675;
  --mint-darker:   #32633A;
  --mint-darkest:  #254A2C;

  /* ── Secondary · Holographic spectrum ───────────────────── */
  /* Pulled from hero/footer backgrounds across the site */
  --holo-cyan:     #69EEFF;
  --holo-cyan-lt:  #8EF2FF;
  --holo-cyan-pale:#BFFFDF;
  --holo-mint:     #6EFFB6;
  --holo-lavender: #C6A2FF;
  --holo-lavender-lt: #DEC9FF;

  /* Deep scheme anchors for tinted sections */
  --deep-navy:     #001441;
  --deep-teal:     #003329;
  --deep-plum:     #230035;

  /* ── Opacity utilities ──────────────────────────────────── */
  --white-5:  rgba(255,255,255,0.05);
  --white-10: rgba(255,255,255,0.10);
  --white-20: rgba(255,255,255,0.20);
  --white-40: rgba(255,255,255,0.40);
  --white-60: rgba(255,255,255,0.60);
  --ink-5:   rgba(28,28,30,0.05);
  --ink-10:  rgba(28,28,30,0.10);
  --ink-15:  rgba(28,28,30,0.15);
  --ink-60:  rgba(28,28,30,0.60);
  --ink-80:  rgba(28,28,30,0.80);

  /* ── Color Scheme 1 — Dark (default) ────────────────────── */
  --bg:     var(--n-black);
  --fg:     var(--n-ink);
  --border: var(--white-10);
  --accent: var(--mint);
  --text:   var(--white);
  --text-dim: rgba(255,255,255,0.72);

  /* ── Typography ─────────────────────────────────────────── */
  --font-display: 'Gelica', 'Times New Roman', serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;

  /* Desktop scale */
  --h1: 84px;   --h1-lh: 1.0;     /* hero display */
  --h2: 60px;   --h2-lh: 1.2;
  --h3: 48px;   --h3-lh: 1.2;
  --h4: 40px;   --h4-lh: 1.3;
  --h5: 32px;   --h5-lh: 1.3;
  --h6: 26px;   --h6-lh: 1.4;

  --text-lg:    20px; --text-lg-lh: 1.5;
  --text-base:  18px; --text-base-lh: 1.5;
  --text-sm:    16px; --text-sm-lh: 1.5;
  --text-xs:    12px; --text-xs-lh: 1.5;

  --tracking-tight: -0.02em;
  --tracking-display: -0.01em;

  /* ── Radius ─────────────────────────────────────────────── */
  --r-xs: 6px;    /* chips, inline badges       */
  --r-sm: 8px;    /* buttons, inputs            */
  --r-md: 12px;   /* icon tiles, nav pills      */
  --r-lg: 16px;   /* cards                      */
  --r-xl: 24px;   /* large panels               */
  --r-2xl: 32px;  /* hero cards, section frames */
  --r-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm: 0 2px 4px -1px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 2px 4px -2px rgba(0,0,0,0.06), 0 4px 8px -2px rgba(0,0,0,0.1);
  --shadow-lg: 0 4px 8px 0 rgba(0,0,0,0.2);
  --shadow-xl: 0 8px 32px -4px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.1);
  --shadow-2xl: 0 20px 60px -12px rgba(0,0,0,0.5);
  --glow-mint:      0 0 40px rgba(126,248,147,0.45);
  --glow-cyan:      0 0 40px rgba(105,238,255,0.45);
  --glow-holo-mint: 0 0 40px rgba(110,255,182,0.45);
  --glow-lavender:  0 0 40px rgba(198,162,255,0.45);
  --glow-white:     0 0 24px rgba(255,255,255,0.55);

  /* ── Spacing (8pt grid) ─────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 48px;
  --s-9: 64px; --s-10: 80px; --s-11: 100px; --s-12: 120px; --s-13: 150px;

  /* ── Layout ─────────────────────────────────────────────── */
  --container: 1140px;
  --gutter: 150px;
}

/* ── Alternate Scheme: Mint (for hero pulls / CTA blocks) ── */
.scheme-mint {
  --bg:     var(--mint);
  --fg:     var(--mint-dark);
  --border: var(--ink-15);
  --accent: var(--n-black);
  --text:   var(--n-black);
  --text-dim: var(--ink-60);
}

/* ── Alternate Scheme: Light (rare, for press / print) ───── */
.scheme-light {
  --bg:     var(--white);
  --fg:     var(--n-lightest);
  --border: var(--ink-10);
  --accent: var(--mint-dark);
  --text:   var(--n-black);
  --text-dim: rgba(0,0,0,0.6);
}

/* ── Base reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  margin: 0;
  color: var(--text);
  text-wrap: balance;
}
h1 { font-size: var(--h1); line-height: var(--h1-lh); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--h2); line-height: var(--h2-lh); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--h3); line-height: var(--h3-lh); }
h4 { font-size: var(--h4); line-height: var(--h4-lh); }
h5 { font-size: var(--h5); line-height: var(--h5-lh); }
h6 { font-size: var(--h6); line-height: var(--h6-lh); }
p  { margin: 0; text-wrap: pretty; }
a  { color: inherit; text-decoration: none; }

::selection { background: var(--mint); color: var(--n-black); }