/* =============================================================
   LOOKAHAD — Colors & Type
   "Nothing less but computation."
   Black/white near-clear backgrounds + a single full red highlight.
   ============================================================= */

@font-face {
  font-family: 'Exo 2';
  src: url('fonts/Exo2-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Exo 2';
  src: url('fonts/Exo2-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Fira Sans';
  src: url('fonts/FiraSans-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fira Sans';
  src: url('fonts/FiraSans-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fira Sans';
  src: url('fonts/FiraSans-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fira Sans';
  src: url('fonts/FiraSans-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Kanit';
  src: url('fonts/Kanit-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Kanit';
  src: url('fonts/Kanit-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Kanit';
  src: url('fonts/Kanit-Black.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 300 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('fonts/Karla-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */

  /* The single brand accent — the infinity-mark red. Used SPARINGLY for
     highlighter / emphasis / call-to-action. Never as a full background. */
  --brand-red:        #EF3B2B;       /* primary highlighter */
  --brand-red-press:  #C82A1C;       /* :active / pressed */
  --brand-red-hover:  #FF4A38;       /* :hover lighten */
  --brand-red-tint:   rgba(239, 59, 43, 0.10);

  /* Near-black & near-white. NOT pure #000 / #FFF — softer, less clinical. */
  --ink:              #0A0A0B;       /* default fg on light, darkest bg */
  --ink-2:            #1A1A1C;       /* subtle elevation on dark */
  --ink-3:            #2A2A2E;       /* borders on dark */

  --paper:            #FAFAF7;       /* default light bg, "near-clear white" */
  --paper-2:          #F2F2EE;       /* elevated card on paper */
  --paper-3:          #E6E6E1;       /* hairlines on paper */

  /* Neutral scale — derived greys for type, dividers, disabled states. */
  --grey-100: #F2F2EE;
  --grey-200: #D9D9D5;
  --grey-300: #B8B8B4;
  --grey-400: #8A8A87;   /* meta text on light */
  --grey-500: #5C5C5A;
  --grey-600: #3D3D3C;
  --grey-700: #2A2A2A;
  --grey-800: #1A1A1A;
  --grey-900: #0A0A0B;

  /* ---------- SEMANTIC FOREGROUND / BACKGROUND ---------- */
  --bg:               var(--paper);
  --bg-elevated:      var(--paper-2);
  --bg-sunken:        var(--paper-3);

  --fg:               var(--ink);          /* primary text */
  --fg-muted:         var(--grey-500);     /* secondary text */
  --fg-subtle:        var(--grey-400);     /* meta / captions */
  --fg-on-dark:       var(--paper);

  --accent:           var(--brand-red);
  --accent-fg:        #FFFFFF;             /* fg ON the red */

  --border:           var(--paper-3);      /* hairline */
  --border-strong:    var(--grey-300);
  --border-on-dark:   var(--ink-3);

  /* Status — kept neutral; the brand is intentionally monochrome + red.
     Avoid introducing greens/blues unless functionally required. */
  --status-info:      #1F4FD9;
  --status-warn:      #C57B00;
  --status-error:     var(--brand-red);
  --status-success:   #2E7D32;

  /* ---------- TYPE ---------- */
  /* Roles (per brand owner):
     - Exo 2     → company name + important headlines (DEFAULT display)
     - Kanit     → alternative headline face when Exo 2 is overused
     - Open Sans → standard body text
     - Fira Sans → condensed/dense content, long copy blocks
     - Karla     → worked-out content (highlights, callouts, accent body)
     Mono = JetBrains Mono via Google Fonts (no brand mono shipped). */
  --font-display:     'Karla', 'Exo 2', 'Helvetica Neue', Arial, sans-serif;
  --font-display-alt: 'Kanit', 'Exo 2', 'Helvetica Neue', Arial, sans-serif;
  --font-body:        'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-body-dense:  'Fira Sans', 'Open Sans', system-ui, sans-serif;
  --font-body-accent: 'Karla', 'Open Sans', system-ui, sans-serif;
  --font-mono:        'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* Weight ramp — Exo 2 ships the full range. Bold (700) is THE brand weight
     (logotype is Exo 2 Bold). 800/900 reserved for hero display only. */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-extra:    800;
  --w-black:    900;

  /* Type scale — modest steps (1.25), generous line-heights. Tight tracking
     on display per the logotype. */
  --fs-12: 0.75rem;     /* 12 — micro / legal */
  --fs-14: 0.875rem;    /* 14 — caption */
  --fs-16: 1rem;        /* 16 — body */
  --fs-18: 1.125rem;    /* 18 — body-lg */
  --fs-20: 1.25rem;     /* 20 — h5 / lede */
  --fs-24: 1.5rem;      /* 24 — h4 */
  --fs-32: 2rem;        /* 32 — h3 */
  --fs-44: 2.75rem;     /* 44 — h2 */
  --fs-60: 3.75rem;     /* 60 — h1 */
  --fs-88: 5.5rem;      /* 88 — display */

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --tracking-tight:  -0.02em;   /* display */
  --tracking-snug:   -0.005em;  /* headings */
  --tracking-normal: 0;
  --tracking-wide:   0.04em;    /* eyebrows, ALL CAPS labels */
  --tracking-wider:  0.12em;    /* logotype / hero eyebrow */

  /* ---------- SPACING (4px base, matching brand "4px" radii) ---------- */
  --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;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- RADII — restrained. 4px is the brand call. ---------- */
  --radius-0:    0;
  --radius-sm:   2px;
  --radius:      4px;        /* DEFAULT — buttons, cards, inputs */
  --radius-md:   4px;        /* alias — keep things consistent */
  --radius-lg:   8px;        /* large containers, modals */
  --radius-pill: 999px;      /* used only for tags/badges */

  /* ---------- SHADOWS — minimal, used for elevation only ---------- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(10, 10, 11, 0.06),
              0 1px 1px rgba(10, 10, 11, 0.04);
  --shadow-2: 0 4px 12px rgba(10, 10, 11, 0.08),
              0 2px 4px rgba(10, 10, 11, 0.04);
  --shadow-3: 0 16px 40px rgba(10, 10, 11, 0.14),
              0 4px 12px rgba(10, 10, 11, 0.06);
  --shadow-red-glow: 0 0 0 4px rgba(239, 59, 43, 0.18); /* focus ring */

  /* ---------- MOTION ---------- */
  --ease:           cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:  120ms;
  --duration:       200ms;
  --duration-slow:  360ms;
}

/* ---------- DARK CONTEXT ---------- */
.on-dark,
.slide.dark,
[data-theme="dark"] {
  --bg:           var(--ink);
  --bg-elevated:  var(--ink-2);
  --bg-sunken:    #050505;
  --fg:           var(--paper);
  --fg-muted:     #B8B8B4;
  --fg-subtle:    #8A8A87;
  --border:       var(--ink-3);
  --border-strong:#3D3D3C;
}

/* =============================================================
   BASE / SEMANTIC ELEMENT STYLES
   ============================================================= */

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: var(--w-regular);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 var(--space-4);
  color: var(--fg);
  text-wrap: balance;
}

h1 { font-size: var(--fs-60); font-weight: var(--w-extra); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--fs-44); font-weight: var(--w-bold); }
h3 { font-size: var(--fs-32); font-weight: var(--w-bold); }
h4 { font-size: var(--fs-24); font-weight: var(--w-semibold); }
h5 { font-size: var(--fs-20); font-weight: var(--w-semibold); }
h6 {
  font-size: var(--fs-14);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-muted);
}

.display {
  font-family: var(--font-display);
  font-size: var(--fs-88);
  font-weight: var(--w-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--accent);
}

p {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg);
  text-wrap: pretty;
  max-width: 68ch;
}

.lede {
  font-size: var(--fs-20);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  font-weight: var(--w-regular);
}

small, .caption {
  font-size: var(--fs-14);
  color: var(--fg-muted);
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration) var(--ease);
}
a:hover { border-bottom-color: currentColor; }

code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

code {
  padding: 0.1em 0.35em;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

pre {
  padding: var(--space-4);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  overflow-x: auto;
  line-height: var(--lh-normal);
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-8) 0;
}

mark, .highlight {
  background: var(--brand-red);
  color: #fff;
  padding: 0.05em 0.25em;
  border-radius: var(--radius-sm);
}

::selection { background: var(--brand-red); color: #fff; }

:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}