:root {
  /* ---------- PRIMITIVES ---------- */

  /* COLORS — oklch neutrals, tinted with red-100 hue (9.2 deg) */
  /* Blacks: dark tones, 100 = darkest */
  --black-100: oklch(15% 0.01 9.2); /* #0f090a */
  --black-90: oklch(20% 0.01 9.2); /* #1a1415 */
  --black-80: oklch(25% 0.011 9.2); /* #272020 */
  --black-70: oklch(30% 0.011 9.2); /* #332c2d */
  --black-60: oklch(35% 0.012 9.2); /* #403839 */
  --black-50: oklch(40% 0.012 9.2); /* #4e4546 */
  --black-40: oklch(45% 0.012 9.2); /* #5c5354 */
  --black-30: oklch(50% 0.011 9.2); /* #696162 */
  --black-20: oklch(55% 0.01 9.2); /* #776f70 */
  --black-10: oklch(60% 0.009 9.2); /* #857e7f */

  /* Whites: light tones, 100 = brand (lightest), higher numbers are darker */
  --white-100: oklch(99.9999% 0.001 9.2); /* #fcfbfb */
  --white-110: oklch(97% 0.003 9.2); /* #f7f4f5 */
  --white-120: oklch(95% 0.005 9.2); /* #f2edee */
  --white-130: oklch(93% 0.005 9.2); /* #ebe6e7 */
  --white-140: oklch(91% 0.006 9.2); /* #e5e0e0 */
  --white-150: oklch(89% 0.006 9.2); /* #dfd9da */
  --white-160: oklch(87% 0.007 9.2); /* #d9d2d3 */
  --white-170: oklch(85% 0.007 9.2); /* #d2cccd */
  --white-180: oklch(83% 0.008 9.2); /* #ccc5c6 */
  --white-190: oklch(81% 0.008 9.2); /* #c6bfc0 */

  /* Accent colors */
  --red-100: oklch(63.1% 0.1906 24.4); /* #E64C4C */
  --blue-100: oklch(67.2% 0.092 234.5); /* #589fc6 */
  --linkedin-blue-100: oklch(47% 0.15 255); /* #0B66C2 */
  --linkedin-blue-80: oklch(57% 0.12 255); /* #3D85CC */
  --linkedin-blue-60: oklch(67% 0.09 255); /* #6FA4D6 */

  /* -- DISTANCE -- */
  /* SPACING - SCALES WITH --sp-scale */
  --sp-2: calc(2px * var(--sp-scale));
  --sp-4: calc(4px * var(--sp-scale));
  --sp-8: calc(8px * var(--sp-scale));
  --sp-12: calc(12px * var(--sp-scale));
  --sp-16: calc(16px * var(--sp-scale));
  --sp-20: calc(20px * var(--sp-scale));
  --sp-24: calc(24px * var(--sp-scale));
  --sp-28: calc(28px * var(--sp-scale));
  --sp-32: calc(32px * var(--sp-scale));
  --sp-40: calc(40px * var(--sp-scale));
  --sp-44: calc(44px * var(--sp-scale));
  --sp-48: calc(48px * var(--sp-scale));
  --sp-64: calc(64px * var(--sp-scale));
  --sp-80: calc(80px * var(--sp-scale));
  --sp-100: calc(100px * var(--sp-scale));

  /* LOCKED SPACING - NO SCALING */
  --lkd-sp-16: 16px;
  --lkd-sp-28: 28px;

  /* FONT SIZES */
  --text-10: 0.625rem;
  --text-12: 0.75rem;
  --text-14: 0.88rem;
  --text-16: 1rem;
  --text-18: 1.13rem;
  --text-20: 1.25rem;
  --text-24: 1.5rem;
  --text-28: 1.75rem;
  --text-32: 2rem;
  --text-36: 2.25rem;
  --text-40: 2.5rem;
  --text-48: 3rem;
  --text-56: 3.5rem;
  --text-64: 4rem;
  --text-72: 4.5rem;

  /* BORDER RADIUS */
  --br-8: 8px;
  --br-16: 16px;
  --br-round: 999px;

  /* ------------------------------------------------------------ ===== THEME ===== ---------- */

  /* Semantic variables - for actual use */

  /* -- SETUP -- */
  --type-scale: 1; /* Default responsive scale for typography */
  --root-font-size: calc(16px * var(--type-scale));
  --sp-scale: 1; /* Default responsive scale for spacing */
  --touch-min: 44px; /* Defines a minimum area for touch elements */
  --max-w: 1440px;
  --bento-row-h: 200px; /* Fixed row height for bento grid */

  /* -- FONT -- */
  --font-fam: "Poppins", sans-serif;
  --font-heading: "Zilla Slab", serif;

  /* Font sizes */
  --f-sz-p: var(--text-16);
  --f-sz-p-large: var(--text-20);
  --f-sz-p-small: var(--text-14);
  --f-sz-p-caption: var(--text-12);
  --f-sz-blockquote: var(--text-24);
  --f-sz-h-1: var(--text-72);
  --f-sz-h-2: var(--text-64);
  --f-sz-h-4: var(--text-28);
  --f-sz-h-3: var(--text-40);
  --f-sz-h-5: var(--text-24);
  --f-sz-h-6: var(--text-16);
  --f-sz-logo: var(--text-32);

  /* Line-heights */
  --lh-label: 1em;
  --lh-heading: 1.1em;
  --lh-sub: 1.4em; /* For multi-line subtitles — between heading and body copy */
  --lh-copy: 1.6em;

  /* Weights */
  --wt-regular: 400; /* SUB-HEADINGS and BODY COPY */
  --wt-medium: 500; /* MINOR HEADINGS */
  --wt-semibold: 600; /* NAV LABELS, EMPHASIS */
  --wt-bold: 700; /* MAJOR HEADINGS */
  --wt-extrabold: 800; /* TAG LABELS */

  /* ------------------------------------------------------------ COLORS -- */
  /* Backgrounds */
  --bg-page: var(--white-100);
  --bg-content: var(--white-100);
  --bg-nav: transparent;
  /* --bg-card: var(--white-110); */
  --bg-card: linear-gradient(
    to right bottom,
    var(--white-140),
    var(--white-110)
  );
  --bg-section-title: var(--black-70);
  --bg-video: var(--black-70); /* Dark media area for bento cards */
  --bg-caption: color-mix(
    in oklch,
    var(--white-110) 90%,
    transparent
  ); /* Semi-transparent caption block */

  /* Text */
  --text-section-title: var(--white-100);
  --text-primary: var(--black-70);
  --text-secondary: var(--black-30);
  --text-reverse: var(--bg-content);
  --text-highlight: var(--red-100);
  --text-title-main: var(--blue-100);

  /* Buttons */
  --btn-primary-default: var(--black-100);
  --btn-primary-hover: var(--black-20);
  --btn-primary-active: var(--black-10);
  --btn-primary-focus: var(--black-70);
  --btn-linkedin-default: var(--linkedin-blue-100);
  --btn-linkedin-hover: var(--linkedin-blue-80);
  --btn-linkedin-active: var(--linkedin-blue-60);
  --btn-linkedin-focus: var(--linkedin-blue-100);

  /* UI */
  --ui-highlight: var(--red-100);
  --ui-divider: var(--white-190);
  --ui-accent-bar: var(--black-70);
  --ui-shadow: color-mix(in oklch, var(--black-70) 15%, transparent);
  --ui-shadow-down: 0 20px 30px -10px var(--ui-shadow);

  /* ------------------------------------------------------------ ===== LAYOUT ===== ---------- */
  /* ------------------------------------------------------------ SPACING -- */
  /* SIZING */
  --height-nav: 10vh;
  --height-hero: 100vh;
  --height-max-img-v: 65vh;
  /* Spacing */
  --gap-page-sections: var(--sp-80);
  --gap-within-sections: var(--sp-64);
  --gap-p-break: var(--sp-32);
  --gap-l-break: var(--sp-12);
  --gap-flex: var(--sp-40);
  --gap-list: var(--sp-24);
  --gap-btn-icon: var(--sp-8);
  --gap-page: var(--sp-24);
  --gap-title: var(--sp-12);
  --gap-card: var(--sp-24);
  --gap-nav: var(--sp-20);
  --gap-bento: var(--sp-12); /* Gap between bento cards */
  --gap-caption: var(--sp-8); /* Internal gap within bento captions */
}

/* ---------- PER DEVICE THEMING * ---------- */
/* Phone: <768px */
@media (max-width: 767.98px) {
  :root {
    --sp-scale: 1;
    --hor-scroll-card-w: 70vw;
    --type-scale: 0.875;
  }
}

/* Tablet: 768–1024px */
@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --sp-scale: 1;
  }
}

/* Desktop: 1025–1366px */
@media (min-width: 1025px) and (max-width: 1366px) {
  :root {
    --type-scale: 1;
    --sp-scale: 1;
  }
}

/* XL-Desktop: >1366px */
@media (min-width: 1367px) {
  :root {
    --type-scale: 1;
    --sp-scale: 1;
  }
}

/* Example Usage 
body {
  background-color: var(--color-white);
}

p,
a {
  color: var(--color-black);
  font-family: var(--font-sans);
}

h1 {
  font-family: var(--font-serif);
}
*/