/* =========================================================================
   AKHA LABS — Colors & Type Foundations
   Import this file anywhere in the design system to get brand tokens.
   ========================================================================= */

/* ----------------------------------------------------------------------- */
/* FONTS                                                                    */
/* ----------------------------------------------------------------------- */
@font-face {
  font-family: 'Neue Haas Display';
  src: url('fonts/NeueHaasDisplay-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Newsreader (serif complement) is loaded from Google Fonts in HTML:
   https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&display=swap
   NOTE: Only the Medium (500) weight of Neue Haas Display was supplied.
   See README.md "Visual Foundations → Type" for the substitution flag. */

:root {
  /* --------------------------------------------------------------------- */
  /* BRAND PALETTE                                                         */
  /* Two accents only — BRICK (warm) + SKY (cool). Neutrals carry the rest.*/
  /* --------------------------------------------------------------------- */
  --brick:        #ae2e04;  /* Warm accent — the signature pop            */
  --sky:          #8ddcf1;  /* Cool accent — light, airy contrast         */
  --ink:          #090a10;  /* Near-black — darkest neutral surface       */
  --slate-900:    #233545;  /* Deep slate navy                            */
  --slate-700:    #2f4059;  /* Slate navy                                 */
  --paper:        #f6f9f9;  /* Off-white — lightest neutral surface       */

  /* Brick ramp (warm accent — tints → shades) */
  --brick-50:  #f7e7e1;
  --brick-100: #f0cdc1;
  --brick-300: #cf6b4c;
  --brick-500: #ae2e04;
  --brick-700: #8f2604;
  --brick-900: #5f1a03;

  /* Sky ramp (cool accent — shades → tints) */
  --sky-900: #2b4d5a;
  --sky-700: #4f97ad;
  --sky-500: #8ddcf1;
  --sky-300: #b3e7f6;
  --sky-100: #d9f3fa;
  --sky-50:  #eefafd;

  /* LEGACY — blue & orange were retired from the brand (kept only so any
     stray reference resolves; do NOT use in new work). */
  --blue-akha: #2f4059; --blue-50: #eaeef0; --blue-500: #2f4059; --blue-700: #233545;
  --orange-akha: #ae2e04;

  /* Neutral ramp (cool-tinted, sits between paper and ink) */
  --n-0:   #ffffff;
  --n-50:  #f6f9f9;
  --n-100: #eaeef0;
  --n-200: #d6dde1;
  --n-300: #b3bec5;
  --n-400: #8795a0;
  --n-500: #5f6e7a;
  --n-600: #45525c;
  --n-700: #2f4059;
  --n-800: #233545;
  --n-900: #131a22;
  --n-950: #090a10;

  /* --------------------------------------------------------------------- */
  /* SEMANTIC COLOR — LIGHT SURFACE (default)                              */
  /* --------------------------------------------------------------------- */
  --bg:          var(--paper);     /* page background          */
  --bg-elevated: var(--n-0);       /* cards, sheets            */
  --bg-sunken:   var(--n-100);     /* wells, inset areas       */
  --fg1:         var(--ink);       /* primary text             */
  --fg2:         var(--n-700);     /* secondary text           */
  --fg3:         var(--n-500);     /* tertiary / captions      */
  --fg-onbrand:  var(--paper);     /* text on ink              */
  --border:      var(--n-200);     /* hairline dividers        */
  --border-strong: var(--n-300);

  /* Accent = BRICK on light surfaces (warm reads best on paper).
     On dark surfaces the .on-dark block flips --accent to SKY. */
  --accent:        var(--brick);
  --accent-hover:  var(--brick-700);
  --accent-press:  #6e1d02;
  --accent-cool:   var(--sky-700); /* cool accent for use on light       */
  --danger:        #8f2604;

  /* --------------------------------------------------------------------- */
  /* TYPE TOKENS                                                           */
  /* --------------------------------------------------------------------- */
  --font-sans:  'Neue Haas Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-serif: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-mono:  'Berkeley Mono', 'SF Mono', ui-monospace, 'Roboto Mono', monospace;

  /* Type scale (1.250 major-third on a 16px base) */
  --t-xs:   12px;
  --t-sm:   14px;
  --t-base: 16px;
  --t-md:   18px;
  --t-lg:   22px;
  --t-xl:   28px;
  --t-2xl:  36px;
  --t-3xl:  46px;
  --t-4xl:  60px;
  --t-5xl:  78px;
  --t-6xl:  104px;

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:   0.08em;   /* eyebrows / labels (uppercase)          */
  --tracking-wider:  0.18em;   /* the wordmark-style spaced caps          */

  /* --------------------------------------------------------------------- */
  /* SPACING — 4px base grid                                               */
  /* --------------------------------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --s-32: 128px;

  /* RADII — restrained; the brand leans geometric/architectural */
  --r-xs: 2px;  --r-sm: 4px;  --r-md: 8px;  --r-lg: 12px;
  --r-xl: 18px; --r-2xl: 26px; --r-pill: 999px;

  /* SHADOWS — soft, cool-tinted, low spread */
  --shadow-sm:  0 1px 2px rgba(9,10,16,0.06), 0 1px 1px rgba(9,10,16,0.04);
  --shadow-md:  0 4px 12px rgba(9,10,16,0.08), 0 1px 3px rgba(9,10,16,0.06);
  --shadow-lg:  0 16px 40px rgba(9,10,16,0.14), 0 4px 10px rgba(9,10,16,0.08);
  --shadow-brand: 0 18px 50px rgba(1,42,130,0.28);

  /* MOTION */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
}

/* ----------------------------------------------------------------------- */
/* DARK SURFACE  — apply .on-dark (or use on near-black backgrounds)        */
/* The brand's "hero" mode: cinematic, ink background, light type.          */
/* ----------------------------------------------------------------------- */
.on-dark {
  --bg:          var(--ink);
  --bg-elevated: var(--slate-900);
  --bg-sunken:   #05060a;
  --fg1:         var(--paper);
  --fg2:         #aeb9c2;
  --fg3:         #76828d;
  --border:      rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.20);
  --accent:        var(--sky);
  --accent-hover:  #a8e6f6;
  --fg-onbrand:    var(--ink);
  color: var(--fg1);
  background: var(--bg);
}

/* ======================================================================= */
/* SEMANTIC TEXT ELEMENTS — opt-in via .ak-prose or use the utilities      */
/* ======================================================================= */
.ak-display {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.ak-h1 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.ak-h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
}
.ak-h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
}
/* Serif editorial voice — for pull quotes, big statements, prose lead-ins */
.ak-serif-display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-4xl);
  line-height: 1.1;
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
}
.ak-serif-lead {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
}
.ak-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-xs);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg3);
}
.ak-body {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  color: var(--fg2);
}
.ak-small {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: var(--lh-normal);
  color: var(--fg3);
}
.ak-mono {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: 0;
  color: var(--fg2);
}