/* ============================================================
   AENON LABS — Color & Type Foundations
   Source of truth: aenon.io.fig (color tokens defined in-file)
   ============================================================ */

/* ---------- Fonts: Silka (geometric sans, thin → black) ---------- */
@font-face {
  font-family: "Silka";
  src: url("fonts/silka-thin-webfont.woff2") format("woff2"),
       url("fonts/silka-thin-webfont.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Silka";
  src: url("fonts/silka-extralight-webfont.woff2") format("woff2"),
       url("fonts/silka-extralight-webfont.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Silka";
  src: url("fonts/silka-light-webfont.woff2") format("woff2"),
       url("fonts/silka-light-webfont.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Silka";
  src: url("fonts/silka-regular-webfont.woff2") format("woff2"),
       url("fonts/silka-regular-webfont.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Silka";
  src: url("fonts/silka-medium-webfont.woff2") format("woff2"),
       url("fonts/silka-medium-webfont.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Silka";
  src: url("fonts/silka-semibold-webfont.woff2") format("woff2"),
       url("fonts/silka-semibold-webfont.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Silka";
  src: url("fonts/silka-bold-webfont.woff2") format("woff2"),
       url("fonts/silka-bold-webfont.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Silka";
  src: url("fonts/silka-black-webfont.woff2") format("woff2"),
       url("fonts/silka-black-webfont.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     COLOR — Water hues on dark. Two ramps, 9 tones each (50→800).
     "primary" moves spring-green → teal → deep-cyan.
     "dark" is the cool neutral ramp.
     ============================================================ */

  /* Primary — the water ramp (vivid spring-green through deep cyan) */
  --primary-50:  #44ffb4;  /* spring green — brightest source */
  --primary-100: #2ce9bf;
  --primary-200: #10cdc1;  /* teal */
  --primary-300: #14a8b3;
  --primary-400: #007f9f;  /* cyan */
  --primary-500: #04679a;
  --primary-600: #035182;
  --primary-700: #003f65;
  --primary-800: #043150;  /* deep well */

  /* Dark — cool neutral ramp */
  --dark-50:  #eff1f3;
  --dark-100: #dee4e9;
  --dark-200: #c3ccd4;
  --dark-300: #abb4bc;
  --dark-400: #8f9aa4;
  --dark-500: #697683;
  --dark-600: #4f5963;
  --dark-700: #373f48;
  --dark-800: #23292f;

  /* Brand surface anchors (observed in logo lockups) */
  --surface-ink:    #202933;  /* primary dark canvas (logo plate) */
  --surface-ink-2:  #222f3e;  /* alt dark canvas (tile) */
  --surface-deep:   #1a2129;  /* deepest well */

  /* ---------- Semantic foreground ---------- */
  --fg-1: var(--dark-50);    /* primary text on dark */
  --fg-2: var(--dark-200);   /* secondary text on dark */
  --fg-3: var(--dark-400);   /* muted / captions on dark */
  --fg-on-light-1: var(--dark-800);  /* primary text on light */
  --fg-on-light-2: var(--dark-600);  /* secondary text on light */

  /* ---------- Semantic surfaces ---------- */
  --bg:        var(--surface-ink);
  --bg-raised: #2a343f;       /* card / raised panel on ink */
  --bg-light:  var(--dark-50);

  /* ---------- Semantic accents ---------- */
  --accent:        var(--primary-100);  /* primary interactive / brand teal */
  --accent-spring: var(--primary-50);   /* spring-green highlight */
  --accent-deep:   var(--primary-400);  /* deep cyan */
  --accent-quiet:  var(--primary-700);  /* muted accent on dark */

  /* Brand gradient — living water, green → teal → cyan */
  --grad-water: linear-gradient(135deg, #52d39a 0%, #2ce9bf 28%, #34a0a4 58%, #168aad 100%);
  --grad-water-vert: linear-gradient(180deg, #52d39a 0%, #2ce9bf 30%, #34a0a4 62%, #168aad 100%);

  /* ---------- Border / hairline ---------- */
  --border-subtle: rgba(239,241,243,0.08);
  --border-soft:   rgba(239,241,243,0.14);
  --border-strong: rgba(239,241,243,0.24);

  /* ---------- Radii — soft, organic, never sharp ---------- */
  --radius-xs:  8px;
  --radius-sm:  12px;
  --radius-md:  20px;
  --radius-lg:  32px;
  --radius-xl:  48px;
  --radius-2xl: 96px;   /* brand tile rounding (observed) */
  --radius-pill: 999px;

  /* ---------- Spacing — 4px base grid ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 144px;

  /* ---------- Shadow / elevation ---------- */
  --shadow-sm: 0 1px 2px rgba(10,16,22,0.24);
  --shadow-md: 0 8px 24px rgba(10,16,22,0.28);
  --shadow-lg: 0 24px 64px rgba(10,16,22,0.40);
  --shadow-glow: 0 0 48px rgba(44,233,191,0.28);  /* spring-water glow */

  /* ============================================================
     TYPE — Silka. Geometric, lowercase-leaning, airy.
     ============================================================ */
  --font-sans: "Silka", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale (fluid-ish, rem-based) */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  88px;
  --text-6xl:  128px;

  /* Weights */
  --weight-thin: 100;
  --weight-extralight: 200;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  /* Line heights */
  --leading-tight: 1.0;
  --leading-snug: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Tracking — display is tight (geometric, like the wordmark) */
  --tracking-display: -0.04em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-caps: 0.14em;
}

/* ============================================================
   SEMANTIC TYPE ROLES
   ============================================================ */
.display-1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-light);   /* wordmark is Silka Light */
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}
.display-2 {
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}
h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
h2, .h2 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
}
.lead {
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
}
p, .body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
}
.small {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.mono-label {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
}