/* ==========================================================================
   TechPhoenix Design System — Core tokens
   Colors, type, spacing, radii, shadows, motion.
   Semantic aliases at the bottom.
   ========================================================================== */

/* Fonts — Kollektif (brand face, provided by user) is used for display/headlines.
   Inter pairs for body UI. JetBrains Mono for code/meta.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Kollektif';
  src: url('fonts/Kollektif.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kollektif';
  src: url('fonts/Kollektif-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Kollektif';
  src: url('fonts/Kollektif-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kollektif';
  src: url('fonts/Kollektif-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@500;600;700&family=Archivo:wght@500;600;700;800&family=Urbanist:wght@500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  /* --- Brand palette -------------------------------------------------- */
  --brand-cobalt:       #0C1E7F;   /* Primary. Deep electric blue — hero blocks, brand backgrounds */
  --brand-cobalt-700:   #142AA8;   /* Hover / elevated cobalt */
  --brand-cobalt-400:   #3D52D4;   /* Tinted cobalt — rare, for diagrams */
  --brand-cobalt-100:   #E4E8FF;   /* Tinted cobalt — surfaces, badges on white */

  --brand-navy:        #0D1645;   /* Logo surface — monogram tile background */
  --brand-amber:        #F5A524;   /* Accent — the "i-dot" pixel. Links, emphasis, status */
  --brand-amber-600:    #D48B10;   /* Hover amber */
  --brand-amber-100:    #FFF3D6;   /* Amber wash for callouts on white */

  --brand-white:        #FFFFFF;   /* Logo mark + text on cobalt */

  /* --- Neutrals — cool slate, tuned to pair with cobalt -------------- */
  --ink-900: #0A0D1C;   /* Near-black — body text on white, dark surfaces */
  --ink-800: #171A2E;   /* Dark surface — "dark grey" from the preview */
  --ink-700: #2A2F48;
  --ink-600: #4A5070;
  --ink-500: #6B7290;   /* Muted text */
  --ink-400: #9097B4;
  --ink-300: #C3C8DC;   /* Hairline borders on dark */
  --ink-200: #E1E4EF;   /* Hairline borders on light */
  --ink-100: #F2F4F9;   /* Subtle surface */
  --ink-50:  #F8F9FC;   /* Page background alt */
  --ink-0:   #FFFFFF;

  /* --- Semantic status ------------------------------------------------ */
  /* Status colors derived in oklch with hues nudged cool to sit with the blue-tinted neutrals */
  --ok:       oklch(0.62 0.12 168);
  --ok-100:   oklch(0.94 0.05 168);
  --warn:     oklch(0.74 0.14 78);
  --warn-100: oklch(0.95 0.06 85);
  --err:      oklch(0.56 0.19 18);
  --err-100:  oklch(0.94 0.05 18);
  --info:     var(--brand-amber);
  --info-100: var(--brand-amber-100);

  /* --- Typography — families ----------------------------------------- */
  --font-display: 'Kollektif', 'Urbanist', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Typography — scale (fluid-ish, optimized for 16px root) ------- */
  --fs-display-xl: 84px;  /* Hero headlines */
  --fs-display-l:  64px;
  --fs-display-m:  48px;
  --fs-display-s:  36px;
  --fs-h1:         32px;
  --fs-h2:         24px;
  --fs-h3:         20px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-eyebrow:    12px;  /* uppercase, tracked */

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-body:   1.55;
  --lh-loose:  1.7;

  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.02em;
  --tracking-eyebrow:  0.14em;  /* UPPERCASE EYEBROWS */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* --- Spacing (4px base) -------------------------------------------- */
  --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 ---------------------------------------------------------- */
  --radius-xs:   2px;   /* Pixel accents — echoes the logo's square */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* --- Elevation / shadow -------------------------------------------- */
  /* Shadows are restrained — studio work relies on crisp edges + cobalt blocks,
     not soft drop-shadows. Use sparingly on cards and hover states. */
  --shadow-xs: 0 1px 2px rgba(10, 13, 28, 0.06);
  --shadow-sm: 0 2px 4px rgba(10, 13, 28, 0.06), 0 1px 2px rgba(10, 13, 28, 0.04);
  --shadow-md: 0 8px 16px rgba(10, 13, 28, 0.08), 0 2px 4px rgba(10, 13, 28, 0.04);
  --shadow-lg: 0 20px 40px rgba(10, 13, 28, 0.10), 0 4px 8px rgba(10, 13, 28, 0.04);
  /* Brand shadow — cobalt-tinted, for hero cards */
  --shadow-brand: 0 24px 48px rgba(12, 30, 127, 0.18), 0 4px 8px rgba(12, 30, 127, 0.08);

  /* --- Borders -------------------------------------------------------- */
  --border-hairline: 1px solid var(--ink-200);
  --border-hairline-dark: 1px solid rgba(255,255,255,0.1);
  --border-strong:   1px solid var(--ink-300);

  /* --- Motion --------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
  --ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* =======================================================================
     Semantic aliases — what the rest of the system refers to
     ======================================================================= */

  /* Surfaces */
  --bg-page:      var(--ink-0);
  --bg-alt:       var(--ink-50);
  --bg-subtle:    var(--ink-100);
  --bg-inverse:   var(--ink-900);
  --bg-brand:     var(--brand-cobalt);
  --surface-card: var(--ink-0);
  --surface-raised: var(--ink-0);

  /* Foregrounds */
  --fg-1: var(--ink-900);   /* Primary text */
  --fg-2: var(--ink-600);   /* Secondary text */
  --fg-3: var(--ink-500);   /* Muted / captions */
  --fg-4: var(--ink-400);   /* Placeholder / disabled */
  --fg-on-brand: var(--brand-white);
  --fg-on-dark:  var(--brand-white);

  /* Accents */
  --accent:        var(--brand-amber);
  --accent-hover:  var(--brand-amber-600);
  --link:          var(--brand-cobalt);
  --link-hover:    var(--brand-cobalt-700);

  /* Borders */
  --border-subtle:  var(--ink-200);
  --border-default: var(--ink-300);
}

/* ==========================================================================
   Global element defaults — opinionated, can be overridden
   ========================================================================== */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-page);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--tw-heading, inherit);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-display-m); font-weight: var(--fw-bold);     line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin: 0; }
h2 { font-size: var(--fs-display-s); font-weight: var(--fw-bold);     line-height: var(--lh-snug);  letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--fs-h1);        font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h2);        font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
h5 { font-size: var(--fs-h3);        font-weight: var(--fw-semibold); line-height: var(--lh-snug); }

p  { margin: 0 0 var(--space-4) 0; text-wrap: pretty; }

a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--link-hover); text-decoration: underline; }

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
code {
  background: var(--ink-100);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--ink-800);
}

::selection { background: var(--brand-amber); color: var(--brand-cobalt); }

/* ==========================================================================
   Utility classes — small, composable
   ========================================================================== */

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

.eyebrow--amber { color: var(--brand-amber); }

.pixel-dot {
  /* The TechPhoenix signature: white rounded-top cap with a cyan pixel inside.
     Echoes the "i" in the logo. Use inline after words or as a bullet. */
  display: inline-block;
  width: 14px; height: 14px;
  background: var(--brand-white);
  border-radius: 3px 3px 1px 1px;
  position: relative;
  vertical-align: baseline;
}
.pixel-dot::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--brand-amber);
  border-radius: 1px;
}
.pixel-dot--on-light {
  background: var(--ink-900);
}

.display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.display-l  { font-family: var(--font-display); font-size: var(--fs-display-l);  font-weight: var(--fw-bold);  line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.display-m  { font-family: var(--font-display); font-size: var(--fs-display-m);  font-weight: var(--fw-bold);  line-height: var(--lh-snug);  letter-spacing: var(--tracking-tight); }
.display-s  { font-family: var(--font-display); font-size: var(--fs-display-s);  font-weight: var(--fw-bold);  line-height: var(--lh-snug); }

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