/* ---------------------------------------------------------------
   Design tokens — Tentinis 2026
   Generated from Figma file: dckrTRxBYis8N3SbrK91TI
   Every value on this page can be tuned from here.
--------------------------------------------------------------- */

:root {
  /* ---------- Color palette ---------- */

  /* Blues (brand navy family) */
  --color-blue-10: #060b2e;          /* Black Pearl — footer bg */
  --color-blue-14: #0a0f3d;          /* Violet — primary dark navy (nav, hero, dark sections) */
  --color-blue-14-2: #1a1a2e;        /* Mirage — near-black for body headings */
  --color-blue-16: rgb(13, 21, 69);  /* hero gradient start */
  --color-blue-26: rgb(26, 42, 108); /* hero gradient end */
  --color-blue-48: #1b0aed;          /* Blue — primary accent (buttons, icons) */
  --color-blue-63: #8890b8;          /* project card gradient top */
  --color-blue-82: #c8ccdc;          /* Blue Haze — muted text */
  --color-blue-85: #d0d4e4;          /* placeholder bg */
  --color-blue-88: #d8dcea;          /* Botticelli — nav link text on dark bg */

  /* Yellow (accent highlight) */
  --color-yellow-49: #d1f801;        /* Electric Lime */

  /* Greys */
  --color-grey-46: #6b6b80;          /* Storm Gray — body text on light bg */
  --color-grey-46-2: #6b6b82;        /* body text alt */
  --color-grey-59: #8f8f9e;          /* Manatee — placeholder labels */
  --color-grey-69: #ababb6;          /* Spun Pearl — muted logos */
  --color-grey-89: #e1e1e5;          /* Mischka — borders */
  --color-grey-96: #f4f4f8;          /* Athens Gray — light section bg */
  --color-grey-97: #eeeeff;          /* Titan White — subtle bg / plus button */

  --color-white: #ffffff;

  /* Alpha helpers on white for dark surfaces */
  --color-white-07: rgba(255, 255, 255, 0.07);
  --color-white-10: rgba(255, 255, 255, 0.10);
  --color-white-15: rgba(255, 255, 255, 0.15);
  --color-white-22: rgba(255, 255, 255, 0.22);
  --color-white-50: rgba(255, 255, 255, 0.50);

  /* Alpha helpers on blue for hero gradient overlay */
  --color-blue-14-94: rgba(10, 15, 61, 0.94);
  --color-blue-14-95: rgba(10, 15, 61, 0.95);
  --color-blue-14-30: rgba(10, 15, 61, 0.30);
  --color-blue-14-05: rgba(10, 15, 61, 0.05);

  /* Semantic aliases used throughout the CSS */
  --bg-page: var(--color-grey-96);
  --bg-surface: var(--color-white);
  --bg-dark: var(--color-blue-14);
  --bg-dark-deep: var(--color-blue-10);

  --text-primary: var(--color-blue-14-2);
  --text-muted: var(--color-grey-46);
  --text-on-dark: var(--color-white);
  --text-on-dark-muted: var(--color-blue-88);

  --border-subtle: var(--color-grey-89);
  --border-dark: var(--color-white-10);

  --brand: var(--color-blue-48);
  --brand-hover: #1600c9;
  --accent: var(--color-yellow-49);

  /* ---------- Typography ---------- */
  --font-primary: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-secondary: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Font sizes — pixel scale from Figma */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-38: 38px;
  --fs-40: 40px;
  --fs-54: 54px;

  /* Line heights */
  --lh-tight: 1;
  --lh-body: 1.6;
  --lh-heading: 1.15;

  /* Letter spacing (uppercase micro-labels) */
  --ls-eyebrow: 1.21px;      /* .11 * 11px */
  --ls-eyebrow-lg: 1.43px;
  --ls-eyebrow-sm: 0.65px;
  --ls-eyebrow-xs: 0.99px;

  /* ---------- Spacing scale ---------- */
  --space-3: 3px;
  --space-4: 4px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-52: 52px;
  --space-72: 72px;
  --space-80: 80px;

  /* ---------- Radii ---------- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-pill: 20px;

  /* ---------- Layout ---------- */
  --container-max: 1440px;
  --section-padding-x: 80px;
  --section-padding-y: 80px;
  --nav-height: 68px;

  /* ---------- Breakpoints (informational — used in media queries) ----------
     Mobile:   < 768px
     Tablet:   768px – 1023px
     Desktop:  ≥ 1024px
  */

  /* ---------- Shadows ---------- */
  --shadow-card: 0 4px 12px rgba(10, 15, 61, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(10, 15, 61, 0.10);
}