/* ============================================================
   LIFE — Design Tokens
   Colors, type, spacing. Use these custom properties everywhere.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Aeonik";
  src: url("../fonts/Aeonik-Air.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("../fonts/Aeonik-Thin.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("../fonts/Aeonik-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("../fonts/Aeonik-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("../fonts/Aeonik-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("../fonts/Aeonik-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("../fonts/Aeonik-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("../fonts/Aeonik-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     COLOR — Brand
     ============================================================ */
  /* Primary purple — the "Life violet". Used for highlights,
     CTA fills, and the keyword chip behind headline words. */
  --life-violet:        #6B1FE0;
  --life-violet-600:    #5A14C4;   /* hover / pressed on light bg */
  --life-violet-700:    #4A0FA8;
  --life-violet-400:    #8744E8;   /* lighter, hover on dark bg */
  --life-violet-300:    #A876F0;
  --life-violet-200:    #C9A8F6;
  --life-violet-100:    #E8DBFB;   /* subtle violet wash */
  --life-violet-050:    #F4ECFE;

  /* Deep brand purple — appears in 3D asterisk shadows.
     Use for moody dark surfaces that lean purple instead of black. */
  --life-violet-deep:   #3A0A85;
  --life-violet-ink:    #1B0640;   /* almost-black with violet bias */

  /* Magenta accent — the pink-magenta glint on the 3D asterisk.
     Use sparingly: highlights on illustrations, gradient stops,
     never as a flat CTA color. */
  --life-magenta:       #D946F4;
  --life-magenta-glow:  #FF7BFF;

  /* ============================================================
     COLOR — Neutrals
     ============================================================ */
  --life-black:         #000000;   /* true black — primary dark bg */
  --life-ink:           #111111;   /* secondary dark surface */
  --life-graphite:      #1F1F1F;   /* cards on black */
  --life-charcoal:      #3A3A3A;
  --life-gray-700:      #595959;
  --life-gray-500:      #8A8A8A;
  --life-gray-400:      #B0B0B0;
  --life-gray-300:      #D4D4D4;
  --life-gray-200:      #E5E5E5;
  --life-gray-150:      #ECECEC;   /* off-white surface — seen in social posts */
  --life-gray-100:      #F4F4F4;
  --life-white:         #FFFFFF;

  /* ============================================================
     SEMANTIC — Foreground / Background
     ============================================================ */
  --fg-1:               var(--life-black);          /* primary text on light */
  --fg-2:               var(--life-gray-700);       /* secondary text on light */
  --fg-3:               var(--life-gray-500);       /* tertiary / meta */
  --fg-accent:          var(--life-violet);

  --fg-on-dark-1:       var(--life-white);
  --fg-on-dark-2:       var(--life-gray-300);
  --fg-on-dark-3:       var(--life-gray-500);

  --bg-1:               var(--life-white);          /* primary light surface */
  --bg-2:               var(--life-gray-150);       /* light surface, soft */
  --bg-3:               var(--life-gray-100);
  --bg-dark-1:          var(--life-black);          /* primary dark surface */
  --bg-dark-2:          var(--life-graphite);

  /* Status — kept neutral; this brand is monochrome+violet. */
  --status-success:     #1FB66E;
  --status-warning:     #E0A415;
  --status-danger:      #E5484D;
  --status-info:        var(--life-violet);

  /* ============================================================
     COLOR — Effects
     ============================================================ */
  --highlight-chip-bg:  var(--life-violet);         /* solid violet block behind keyword */
  --highlight-chip-fg:  var(--life-white);

  --line-1:             rgba(0, 0, 0, 0.12);        /* hairline on light */
  --line-on-dark:       rgba(255, 255, 255, 0.16);  /* hairline on dark */

  /* ============================================================
     TYPE — Family
     ============================================================ */
  --font-sans: "Aeonik", "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: "Aeonik", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* ============================================================
     TYPE — Scale
     The Life voice leans on confident, dense, ALL-CAPS display
     type with tight line-height. Body type is sentence case.
     ============================================================ */
  --fs-display-xl:  96px;   --lh-display-xl:  0.95;
  --fs-display-lg:  72px;   --lh-display-lg:  0.98;
  --fs-display-md:  56px;   --lh-display-md:  1.0;
  --fs-display-sm:  44px;   --lh-display-sm:  1.05;

  --fs-h1:          40px;   --lh-h1:          1.1;
  --fs-h2:          32px;   --lh-h2:          1.15;
  --fs-h3:          24px;   --lh-h3:          1.2;
  --fs-h4:          20px;   --lh-h4:          1.25;

  --fs-body-lg:     18px;   --lh-body-lg:     1.45;
  --fs-body:        16px;   --lh-body:        1.5;
  --fs-body-sm:     14px;   --lh-body-sm:     1.5;
  --fs-caption:     12px;   --lh-caption:     1.4;
  --fs-eyebrow:     12px;   --lh-eyebrow:     1.2;     /* ALL CAPS, tracked */

  /* Tracking — Aeonik in caps benefits from a touch of letter-spacing. */
  --tracking-display:   -0.02em;   /* tight on big display */
  --tracking-headline:  -0.01em;
  --tracking-body:       0em;
  --tracking-eyebrow:    0.14em;   /* wide for caps eyebrows */
  --tracking-caps:       0.04em;   /* general all-caps body */

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 72px;
  --space-11: 96px;
  --space-12: 128px;

  /* ============================================================
     RADII
     Life leans rectangular. Buttons are squared / pill at extreme.
     Cards have small or no radius. Avoid medium chunky radii.
     ============================================================ */
  --radius-0:    0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ============================================================
     ELEVATION
     Use sparingly — flat brand. One soft shadow on light, plus
     a violet glow used for special CTAs over dark backgrounds.
     ============================================================ */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.08), 0 12px 32px rgba(0,0,0,0.06);
  --shadow-3: 0 8px 24px rgba(0,0,0,0.12), 0 24px 64px rgba(0,0,0,0.10);
  --glow-violet: 0 0 0 1px rgba(107,31,224,0.30), 0 8px 32px rgba(107,31,224,0.45);

  /* ============================================================
     MOTION
     Calm. Fades and short translates. No bounce.
     ============================================================ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 480ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-max: 1280px;
  --container-px:  clamp(20px, 4vw, 80px);
}

/* ============================================================
   Base / element-level defaults
   Apply these by adding the global stylesheet to a page; the
   classes (.h1, .display-lg, .eyebrow) opt in to the system.
   ============================================================ */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display-xl, .display-lg, .display-md, .display-sm,
.h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-headline);
  text-wrap: balance;
}

.display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--tracking-display); font-weight: 900; }
.display-lg { font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); letter-spacing: var(--tracking-display); font-weight: 900; }
.display-md { font-size: var(--fs-display-md); line-height: var(--lh-display-md); letter-spacing: var(--tracking-display); font-weight: 700; }
.display-sm { font-size: var(--fs-display-sm); line-height: var(--lh-display-sm); font-weight: 700; }

.h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 500; }

.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.body    { font-size: var(--fs-body);    line-height: var(--lh-body); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-3); }

.eyebrow {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: 500;
}

.caps {
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

/* The signature highlight: a solid violet chip that hugs a word
   inside a headline. Apply to an inline span around the keyword. */
.hl {
  background: var(--highlight-chip-bg);
  color: var(--highlight-chip-fg);
  padding: 0.02em 0.18em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hl--ink {
  background: var(--life-black);
  color: var(--life-white);
}