/* ==========================================================================
   Ingage Design System — Foundations
   Colors + Typography tokens, plus semantic helpers.
   Import this file anywhere in the project.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Calibre";
  font-weight: 100;
  font-style: normal;
  src: url("fonts/Calibre-Thin.otf") format("opentype");
}
@font-face {
  font-family: "Calibre";
  font-weight: 100;
  font-style: italic;
  src: url("fonts/Calibre-ThinItalic.otf") format("opentype");
}
@font-face {
  font-family: "Calibre";
  font-weight: 300;
  font-style: normal;
  src: url("fonts/Calibre-Light.otf") format("opentype");
}
@font-face {
  font-family: "Calibre";
  font-weight: 300;
  font-style: italic;
  src: url("fonts/Calibre-LightItalic.otf") format("opentype");
}
@font-face {
  font-family: "Calibre";
  font-weight: 400;
  font-style: normal;
  src: url("fonts/Calibre-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Calibre";
  font-weight: 400;
  font-style: italic;
  src: url("fonts/Calibre-RegularItalic.otf") format("opentype");
}
@font-face {
  font-family: "Calibre";
  font-weight: 500;
  font-style: normal;
  src: url("fonts/Calibre-Medium.otf") format("opentype");
}
@font-face {
  font-family: "Calibre";
  font-weight: 500;
  font-style: italic;
  src: url("fonts/Calibre-MediumItalic.otf") format("opentype");
}
@font-face {
  font-family: "Calibre";
  font-weight: 600;
  font-style: normal;
  src: url("fonts/Calibre-Semibold.otf") format("opentype");
}
@font-face {
  font-family: "Calibre";
  font-weight: 600;
  font-style: italic;
  src: url("fonts/Calibre-SemiboldItalic.otf") format("opentype");
}
@font-face {
  font-family: "Calibre";
  font-weight: 700;
  font-style: normal;
  src: url("fonts/Calibre-Bold.otf") format("opentype");
}
@font-face {
  font-family: "Calibre";
  font-weight: 700;
  font-style: italic;
  src: url("fonts/Calibre-BoldItalic.otf") format("opentype");
}
@font-face {
  font-family: "Calibre";
  font-weight: 900;
  font-style: normal;
  src: url("fonts/Calibre-Black.otf") format("opentype");
}
@font-face {
  font-family: "Calibre";
  font-weight: 900;
  font-style: italic;
  src: url("fonts/Calibre-BlackItalic.otf") format("opentype");
}

:root {
  /* ---------- Core Brand Colors ---------- */
  --swell-green:       #2AD4C0;   /* primary accent / CTAs / logo */
  --swell-green-dark:  #00B09B;   /* darker variant on light bgs */
  --whale-gray:        #232329;   /* primary dark — text on light, bg on dark */
  --metro-white:       #FAFAF7;   /* paper white — bg on light, text on dark */

  /* ---------- Extended Neutrals ---------- */
  --dark-gray:         #16171A;   /* deep surface (design studio canvas) */
  --light-whale:       #393842;   /* secondary dark / borders on dark */
  --really-light-gray: #CDCDCF;
  --light-whale-50:    #EBEBEC;
  --white:             #FFFFFF;
  --black:             #000000;

  /* ---------- Accent Palette (use sparingly) ---------- */
  --zenith-blue:       #3065CB;
  --hippy-orange:      #F47262;
  --banned-purple:     #C957D9;

  /* ---------- Semantic — Light Mode default ---------- */
  --bg:                var(--metro-white);
  --bg-elevated:       #FFFFFF;
  --bg-subtle:         #F2F2EF;
  --surface-border:    #E3E3E0;

  --fg:                var(--whale-gray);          /* primary text */
  --fg-2:              #4A4A52;                    /* secondary text */
  --fg-3:              #8E8E90;                    /* tertiary / placeholder */
  --fg-inverse:        var(--metro-white);
  --fg-accent:         var(--swell-green-dark);    /* accent label on light bg */

  --accent:            var(--swell-green);
  --accent-contrast:   var(--whale-gray);          /* text on accent */
  --accent-hover:      #25bfad;
  --accent-press:      #1fae9d;

  --focus-ring:        color-mix(in oklch, var(--swell-green) 60%, transparent);

  /* ---------- Elevation / Shadow ---------- */
  --shadow-1: 0 1px 2px 0 rgba(0,0,0,0.06), 0 1px 1px 0 rgba(0,0,0,0.04);
  --shadow-2: 0 2px 10px 0 rgba(0,0,0,0.08), 0 1px 2px 0 rgba(0,0,0,0.06);
  --shadow-3: 0 8px 24px 0 rgba(0,0,0,0.12), 0 2px 6px 0 rgba(0,0,0,0.06);
  --shadow-panel-dark: 0 2px 10px 0 rgba(0,0,0,0.30), 0 1px 2px 0 rgba(0,0,0,0.10);
  --shadow-image:      0 0 20px 0 rgba(0,0,0,0.25);

  /* ---------- Radii ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;     /* buttons, inspector fields, pills */
  --radius-md: 8px;     /* cards, panels, platters */
  --radius-lg: 12px;
  --radius-pill: 28px;  /* mini-bar style */
  --radius-full: 9999px;

  /* ---------- Spacing (4pt 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;

  /* ---------- Typography ---------- */
  --font-sans: "Calibre", "Calibre App", -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Inter", Arial, sans-serif;
  --font-sans-display: var(--font-sans);
  --font-fallback-heading: "Arial Black", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fw-thin: 100;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* Type scale — tight, neo-grotesk */
  --fs-12: 12px;  --lh-12: 16px;
  --fs-14: 14px;  --lh-14: 20px;
  --fs-16: 16px;  --lh-16: 22px;
  --fs-18: 18px;  --lh-18: 24px;   /* Inspector/button body */
  --fs-20: 20px;  --lh-20: 28px;
  --fs-24: 24px;  --lh-24: 30px;   /* smallest "heading" per brand */
  --fs-32: 32px;  --lh-32: 38px;
  --fs-44: 44px;  --lh-44: 48px;
  --fs-56: 56px;  --lh-56: 60px;
  --fs-72: 72px;  --lh-72: 76px;
  --fs-96: 96px;  --lh-96: 96px;
}

/* ---------- Dark Mode (Design Studio / hero dark surfaces) ---------- */
:root[data-theme="dark"],
.ingage-dark {
  --bg:              var(--dark-gray);
  --bg-elevated:     var(--whale-gray);
  --bg-subtle:       #2E2D35;
  --surface-border:  var(--light-whale);

  --fg:              var(--metro-white);
  --fg-2:            #B6B6B8;
  --fg-3:            #8E8E90;
  --fg-inverse:      var(--whale-gray);
  --fg-accent:       var(--swell-green);

  --accent-contrast: var(--whale-gray);
}

/* ==========================================================================
   Semantic helpers — apply as class or nest under `.ingage` scope.
   ========================================================================== */

html, body { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
body { font-size: var(--fs-18); line-height: var(--lh-18); font-weight: var(--fw-regular); }

.ingage-h1, h1.ingage {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-72);
  line-height: var(--lh-72);
  letter-spacing: -0.02em;
  color: var(--fg);
  text-wrap: balance;
}
.ingage-h2, h2.ingage {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-56);
  line-height: var(--lh-56);
  letter-spacing: -0.015em;
  color: var(--fg);
  text-wrap: balance;
}
.ingage-h3, h3.ingage {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-44);
  line-height: var(--lh-44);
  letter-spacing: -0.01em;
  color: var(--fg);
}
.ingage-h4, h4.ingage {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-32);
  line-height: var(--lh-32);
  color: var(--fg);
}
.ingage-h5, h5.ingage {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-24);
  line-height: var(--lh-24);
  color: var(--fg);
}
.ingage-subhead {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: var(--lh-20);
  color: var(--fg);
}
.ingage-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: 1.5;
  color: var(--fg);
}
.ingage-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--fg-2);
}
.ingage-caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  color: var(--fg-3);
}

/* Eyebrow / accent label — small caps-feel, swell green */
.ingage-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-14);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* Inspector / UI text — tight 18/18 Calibre Bold (per Design Studio) */
.ingage-ui-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-18);
  line-height: 1;
  letter-spacing: -0.024em;
  color: var(--fg);
}

/* Section header inside platters — all caps, 12px semibold */
.ingage-section-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
}

code, .ingage-mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}