/* =============================================================
   Emisophic — Colors & Type
   -------------------------------------------------------------
   A monochromatic, high-contrast core palette derived from the
   logo (pure black wordmark + fish mark on white). Accents pull
   from an aquatic + warm-coral pairing — "fish in clear water"
   — used sparingly for highlights, never as the primary surface.
   ============================================================= */

/* ---------- Webfonts ---------- */
/* Brand font: Montserrat (variable). Loaded from local files. */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* Mono kept from Google Fonts (no brand mono provided). */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------------- Color: Brand ---------------- */
  --emi-ink:        #0B0B0C;   /* near-black, the logo's "black"        */
  --emi-paper:      #FAF7F2;   /* warm off-white — primary background   */
  --emi-paper-pure: #FFFFFF;   /* pure white for cards over warm paper  */

  /* Signature — coral is THE brand color for an agency voice. */
  --emi-coral:      #FF4A1C;   /* hot coral — primary accent / CTA      */

  /* Pop set — campaign + social media colors. Used boldly. */
  --emi-lemon:      #FFD23F;   /* lemon — highlights, callouts          */
  --emi-cobalt:     #3D2BFF;   /* cobalt — editorial / link / depth     */
  --emi-bubble:     #FFB8D1;   /* bubble — social, soft, secondary      */
  --emi-pine:       #0E5E4E;   /* pine — grounded, success              */

  /* Tints — paler surfaces of each pop */
  --emi-coral-tint:  #FFE2DA;
  --emi-lemon-tint:  #FFF3B8;
  --emi-cobalt-tint: #DDD8FF;
  --emi-bubble-tint: #FFE6EF;
  --emi-pine-tint:   #C6E5DC;

  /* ---------------- Color: Neutrals ---------------- */
  --emi-fg-1:       #0B0B0C;   /* primary text                          */
  --emi-fg-2:       #3D3D40;   /* body text                             */
  --emi-fg-3:       #6B6B70;   /* secondary text                        */
  --emi-fg-4:       #9B9BA0;   /* tertiary, captions, placeholders      */
  --emi-fg-on-dark: #FAF7F2;

  --emi-bg-1:       #FAF7F2;   /* page background (warm paper)          */
  --emi-bg-2:       #F2EDE4;   /* sunken surface                        */
  --emi-bg-3:       #E8E1D4;   /* recessed / hover well                 */
  --emi-bg-inverse: #0B0B0C;

  --emi-line-1:     #E5DECF;   /* hairline divider                      */
  --emi-line-2:     #D4CBB8;   /* stronger divider                      */
  --emi-line-3:     #0B0B0C;   /* heavy outline (signature look)        */

  /* ---------------- Semantic ---------------- */
  --emi-success:    #0E5E4E;
  --emi-warning:    #FFD23F;
  --emi-danger:     #FF4A1C;
  --emi-info:       #3D2BFF;

  /* ---------------- Type: Families ---------------- */
  --emi-font-display: 'Montserrat', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --emi-font-body:    'Montserrat', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --emi-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------------- Type: Weights ---------------- */
  --emi-w-regular:  400;
  --emi-w-medium:   600;   /* Nunito's 500 looks light; jump to 600     */
  --emi-w-bold:     800;
  --emi-w-black:    900;   /* the wordmark weight                       */

  /* ---------------- Type: Scale ---------------- */
  --emi-fs-display: 88px;
  --emi-fs-h1:      56px;
  --emi-fs-h2:      40px;
  --emi-fs-h3:      28px;
  --emi-fs-h4:      20px;
  --emi-fs-body-lg: 18px;
  --emi-fs-body:    16px;
  --emi-fs-small:   14px;
  --emi-fs-caption: 12px;

  /* ---------------- Type: Line height ---------------- */
  --emi-lh-tight:   1.05;
  --emi-lh-snug:    1.2;
  --emi-lh-normal:  1.45;
  --emi-lh-relaxed: 1.6;

  /* ---------------- Type: Letter spacing ---------------- */
  --emi-tr-display: -0.02em;   /* tight on the big stuff                */
  --emi-tr-tight:   -0.01em;
  --emi-tr-normal:  0;
  --emi-tr-loose:   0.04em;
  --emi-tr-caps:    0.08em;    /* used on small all-caps labels         */

  /* ---------------- Spacing ---------------- */
  --emi-sp-1:  4px;
  --emi-sp-2:  8px;
  --emi-sp-3:  12px;
  --emi-sp-4:  16px;
  --emi-sp-5:  24px;
  --emi-sp-6:  32px;
  --emi-sp-7:  48px;
  --emi-sp-8:  64px;
  --emi-sp-9:  96px;
  --emi-sp-10: 128px;

  /* ---------------- Radius ---------------- */
  /* The wordmark's letterforms have generous, soft corners — radii
     follow that. Nothing sharp; nothing perfectly circular except
     pills and avatars. */
  --emi-radius-xs:   4px;
  --emi-radius-sm:   8px;
  --emi-radius-md:   14px;
  --emi-radius-lg:   22px;
  --emi-radius-xl:   32px;
  --emi-radius-pill: 999px;

  /* ---------------- Shadow / Elevation ---------------- */
  /* Soft, low-spread, slightly warm shadows — like sunlight through
     water onto paper. */
  --emi-shadow-1: 0 1px 2px rgba(11, 11, 12, 0.06), 0 1px 1px rgba(11, 11, 12, 0.04);
  --emi-shadow-2: 0 2px 6px rgba(11, 11, 12, 0.06), 0 4px 12px rgba(11, 11, 12, 0.05);
  --emi-shadow-3: 0 6px 16px rgba(11, 11, 12, 0.08), 0 12px 32px rgba(11, 11, 12, 0.06);
  --emi-shadow-4: 0 16px 40px rgba(11, 11, 12, 0.10), 0 32px 80px rgba(11, 11, 12, 0.08);

  /* Signature outlined-card shadow: hard black offset, no blur.
     Inspired by the heavy black weight of the wordmark. */
  --emi-shadow-stamp: 4px 4px 0 0 var(--emi-ink);
  --emi-shadow-stamp-lg: 8px 8px 0 0 var(--emi-ink);

  /* ---------------- Borders ---------------- */
  --emi-border-hair:  1px solid var(--emi-line-1);
  --emi-border-rule:  1px solid var(--emi-line-2);
  --emi-border-heavy: 2px solid var(--emi-ink);
  --emi-border-stamp: 3px solid var(--emi-ink);   /* signature look     */

  /* ---------------- Motion ---------------- */
  --emi-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);     /* "swim out"  */
  --emi-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* gentle bob  */
  --emi-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --emi-dur-fast:    120ms;
  --emi-dur-base:    220ms;
  --emi-dur-slow:    420ms;

  /* ---------------- Layout ---------------- */
  --emi-container:   1200px;
  --emi-container-narrow: 720px;
  --emi-gutter:      24px;
}

/* =============================================================
   Semantic typography classes
   Use these in place of raw font properties.
   ============================================================= */

.emi-display {
  font-family: var(--emi-font-display);
  font-weight: var(--emi-w-black);
  font-size: var(--emi-fs-display);
  line-height: var(--emi-lh-tight);
  letter-spacing: var(--emi-tr-display);
  color: var(--emi-fg-1);
}

.emi-h1 {
  font-family: var(--emi-font-display);
  font-weight: var(--emi-w-black);
  font-size: var(--emi-fs-h1);
  line-height: var(--emi-lh-tight);
  letter-spacing: var(--emi-tr-display);
  color: var(--emi-fg-1);
}

.emi-h2 {
  font-family: var(--emi-font-display);
  font-weight: var(--emi-w-bold);
  font-size: var(--emi-fs-h2);
  line-height: var(--emi-lh-snug);
  letter-spacing: var(--emi-tr-tight);
  color: var(--emi-fg-1);
}

.emi-h3 {
  font-family: var(--emi-font-display);
  font-weight: var(--emi-w-bold);
  font-size: var(--emi-fs-h3);
  line-height: var(--emi-lh-snug);
  letter-spacing: var(--emi-tr-tight);
  color: var(--emi-fg-1);
}

.emi-h4 {
  font-family: var(--emi-font-display);
  font-weight: var(--emi-w-bold);
  font-size: var(--emi-fs-h4);
  line-height: var(--emi-lh-normal);
  color: var(--emi-fg-1);
}

.emi-body-lg {
  font-family: var(--emi-font-body);
  font-weight: var(--emi-w-regular);
  font-size: var(--emi-fs-body-lg);
  line-height: var(--emi-lh-relaxed);
  color: var(--emi-fg-2);
}

.emi-body {
  font-family: var(--emi-font-body);
  font-weight: var(--emi-w-regular);
  font-size: var(--emi-fs-body);
  line-height: var(--emi-lh-relaxed);
  color: var(--emi-fg-2);
}

.emi-small {
  font-family: var(--emi-font-body);
  font-weight: var(--emi-w-regular);
  font-size: var(--emi-fs-small);
  line-height: var(--emi-lh-normal);
  color: var(--emi-fg-3);
}

.emi-caption {
  font-family: var(--emi-font-body);
  font-weight: var(--emi-w-medium);
  font-size: var(--emi-fs-caption);
  line-height: var(--emi-lh-normal);
  color: var(--emi-fg-3);
  letter-spacing: var(--emi-tr-loose);
}

.emi-eyebrow {
  font-family: var(--emi-font-body);
  font-weight: var(--emi-w-bold);
  font-size: var(--emi-fs-caption);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--emi-tr-caps);
  color: var(--emi-fg-3);
}

.emi-mono {
  font-family: var(--emi-font-mono);
  font-weight: var(--emi-w-regular);
  font-size: var(--emi-fs-small);
  line-height: var(--emi-lh-normal);
  color: var(--emi-fg-2);
}