/* ============================================================
 * GoIDEA — design tokens (primitive + semantic-dark)
 *
 * Two-layer architecture:
 *   Layer 1 — PRIMITIVES (raw palette, scales). Same in both themes.
 *   Layer 2 — SEMANTIC tokens (--bg, --fg, --accent, …). Components
 *             reference ONLY these, never primitives.
 *
 * Theme overrides live in theme.css (light) and prefers-color-scheme
 * fallback. Default is dark (no attribute = dark).
 *
 * NO "JetBrains Mono", NO "--font-mono" — explicit decision v4.1 (G2).
 * Every "mono-looking" use case (numbers, eyebrows, timestamps) is
 * replaced with Exo + tabular-nums + caps tracking.
 * ============================================================ */

/* ---- Self-hosted Exo (no Google Fonts CDN — privacy + perf) ---- */
@font-face { font-family:"Exo"; src:url("../fonts/exo/Exo-Thin.ttf")             format("truetype"); font-weight:100; font-style:normal; font-display:swap; }
@font-face { font-family:"Exo"; src:url("../fonts/exo/Exo-ThinItalic.ttf")       format("truetype"); font-weight:100; font-style:italic; font-display:swap; }
@font-face { font-family:"Exo"; src:url("../fonts/exo/Exo-ExtraLight.ttf")       format("truetype"); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:"Exo"; src:url("../fonts/exo/Exo-ExtraLightItalic.ttf") format("truetype"); font-weight:200; font-style:italic; font-display:swap; }
@font-face { font-family:"Exo"; src:url("../fonts/exo/Exo-Light.ttf")            format("truetype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Exo"; src:url("../fonts/exo/Exo-LightItalic.ttf")      format("truetype"); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:"Exo"; src:url("../fonts/exo/Exo-Regular.ttf")          format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Exo"; src:url("../fonts/exo/Exo-Italic.ttf")           format("truetype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Exo"; src:url("../fonts/exo/Exo-Medium.ttf")           format("truetype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Exo"; src:url("../fonts/exo/Exo-MediumItalic.ttf")     format("truetype"); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:"Exo"; src:url("../fonts/exo/Exo-SemiBold.ttf")         format("truetype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Exo"; src:url("../fonts/exo/Exo-SemiBoldItalic.ttf")   format("truetype"); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:"Exo"; src:url("../fonts/exo/Exo-Bold.ttf")             format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Exo"; src:url("../fonts/exo/Exo-BoldItalic.ttf")       format("truetype"); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:"Exo"; src:url("../fonts/exo/Exo-ExtraBold.ttf")        format("truetype"); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:"Exo"; src:url("../fonts/exo/Exo-ExtraBoldItalic.ttf")  format("truetype"); font-weight:800; font-style:italic; font-display:swap; }
@font-face { font-family:"Exo"; src:url("../fonts/exo/Exo-Black.ttf")            format("truetype"); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:"Exo"; src:url("../fonts/exo/Exo-BlackItalic.ttf")      format("truetype"); font-weight:900; font-style:italic; font-display:swap; }

/* ============================================================
 * LAYER 1 — PRIMITIVES (same across themes)
 * ============================================================ */
:root {
  /* ---- Type families ---- */
  --font-sans:    "Exo", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Exo", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* ---- Type size scale (rem; html root = 16px) ---- */
  --text-xs:   0.75rem;     /* 12 */
  --text-sm:   0.875rem;    /* 14 */
  --text-base: 1rem;        /* 16 */
  --text-md:   1.125rem;    /* 18 */
  --text-lg:   1.25rem;     /* 20 */
  --text-xl:   1.5rem;      /* 24 */
  --text-2xl:  2.125rem;    /* 34 */
  --text-3xl:  2.75rem;     /* 44 */
  --text-4xl:  3.5rem;      /* 56 */
  --text-5xl:  4.5rem;      /* 72 */
  --text-6xl:  6rem;        /* 96 — hero */

  --leading-tight:  1.02;
  --leading-snug:   1.18;
  --leading-normal: 1.55;
  --leading-loose:  1.75;

  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-caps:   0.14em;

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

  /* ---- Color · orange (brand accent) ---- */
  --color-orange-50:  #FFF4E0;
  --color-orange-100: #FFE1B0;
  --color-orange-200: #FFCB7A;
  --color-orange-300: #FFB347;
  --color-orange-400: #FFA21F;
  --color-orange-500: #FF9900;   /* primary brand accent */
  --color-orange-600: #E68600;
  --color-orange-700: #B86A00;
  --color-orange-800: #8A4F00;   /* AA on white (6.56:1) — accent as TEXT on light */
  --color-orange-900: #5C3500;

  /* ---- Color · coral (danger, illustrative) ---- */
  --color-coral-400: #FF4D6A;
  --color-coral-500: #E63956;
  --color-coral-600: #C42742;
  --color-coral-700: #A61E36;

  /* ---- Color · teal (success / cool complement) ---- */
  --color-teal-300: #7EC9E0;
  --color-teal-400: #5BB8D5;
  --color-teal-500: #3CAAD2;
  --color-teal-600: #2B8AAC;
  --color-teal-700: #1F6880;

  /* ---- Color · claris-blue (info, partnership) ---- */
  --color-claris-blue-400: #6B94FF;
  --color-claris-blue-500: #3F72FF;
  --color-claris-blue-600: #2F58D6;

  /* ---- Color · neutral (ink scale; 0 = blackest, 1000 = white) ---- */
  --color-neutral-0:    #0A0A0B;   /* dark canvas */
  --color-neutral-50:   #121214;
  --color-neutral-100:  #1A1A1D;
  --color-neutral-200:  #232327;
  --color-neutral-300:  #2E2E34;
  --color-neutral-400:  #3D3D44;
  --color-neutral-500:  #5A5A64;
  --color-neutral-600:  #878790;
  --color-neutral-700:  #B4B4BA;
  --color-neutral-800:  #D9D9DC;
  --color-neutral-900:  #EEEEEF;
  --color-neutral-950:  #F7F7F8;
  --color-neutral-1000: #FFFFFF;   /* light canvas */

  /* ---- Radius ---- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ---- Spacing (4 px base, named --space-N) ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---- Layout — hard-set widths ---- */
  --content-max: 1280px;   /* wide marketing */
  --reading-max: 1080px;   /* reading column */
  --content-pad: 32px;     /* desktop side padding */
  --content-pad-mobile: 24px;

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    120ms;
  --dur-med:     220ms;
  --dur-slow:    400ms;

  /* ---- Z-index scale ---- */
  --z-base:    0;
  --z-content: 1;
  --z-sticky:  40;
  --z-overlay: 80;
  --z-modal:   100;
  --z-toast:   2147483600;
}

/* ============================================================
 * LAYER 2 — SEMANTIC TOKENS · DARK (default)
 * Components reference ONLY these.
 * ============================================================ */
:root,
:root[data-theme="dark"] {
  /* Surfaces */
  --bg:             var(--color-neutral-0);
  --bg-subtle:      var(--color-neutral-50);
  --bg-elevated:    var(--color-neutral-100);
  --bg-callout:     var(--color-neutral-300);   /* wyróżnione boksy (pullquote) — 2 kroki nad --bg-elevated, widoczny też na section--elevated */
  --bg-elevated-2:  var(--color-neutral-200);
  --bg-inverse:     var(--color-neutral-1000);

  /* Text */
  --fg:           var(--color-neutral-1000);
  --fg-1:         var(--color-neutral-1000);
  --fg-2:         var(--color-neutral-800);
  --fg-3:         var(--color-neutral-700);
  --fg-muted:     var(--color-neutral-600);
  --fg-disabled:  var(--color-neutral-500);
  --fg-inverse:   var(--color-neutral-0);

  /* Borders */
  --border:         rgba(255, 255, 255, 0.08);
  --border-strong:  rgba(255, 255, 255, 0.18);
  --border-subtle:  rgba(255, 255, 255, 0.04);
  --border-brand:   var(--color-orange-500);

  /* Brand / accent — split fill vs text */
  --accent:          var(--color-orange-500);   /* fills (CTA bg, pills) */
  --accent-on-bg:    var(--color-orange-500);   /* accent as TEXT on dark */
  --accent-hover:    var(--color-orange-400);
  --accent-press:    var(--color-orange-600);
  --on-accent:       #1A1000;                   /* foreground on filled accent — 8.77:1 AAA */

  /* Status */
  --success:         var(--color-teal-500);
  --success-on-bg:   var(--color-teal-500);
  --warning:         var(--color-orange-500);
  --warning-on-bg:   var(--color-orange-500);
  --danger:          var(--color-coral-500);
  --danger-on-bg:    var(--color-coral-500);
  --info:            var(--color-claris-blue-500);
  --info-on-bg:      var(--color-claris-blue-500);

  /* Elevation */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-sm:    0 2px 6px rgba(0, 0, 0, 0.28);
  --shadow-md:    0 8px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg:    0 20px 48px rgba(0, 0, 0, 0.45);
  --shadow-glow:  0 16px 60px rgba(255, 153, 0, 0.42);   /* wzmocnione dla CTA hover */

  /* Overlays */
  --overlay-scrim: rgba(0, 0, 0, 0.64);
  --overlay-glass: rgba(255, 255, 255, 0.04);

  /* Header (sticky blur) */
  --header-bg:     rgba(10, 10, 11, 0.72);
  --header-blur:   16px;
}

/* ============================================================
 * Root — base typography binding
 * ============================================================ */
html {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  color-scheme: dark light;
  font-feature-settings: "ss01", "cv11";  /* Exo stylistic refinements */
}
:root[data-theme="dark"]  { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================
 * Semantic type classes
 * ============================================================ */
.h-display {
  /* Decision (Bartek): hero fonts felt too large at 96px max.
     Tighter scale that still feels editorial: 34→64px responsive. */
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: var(--weight-bold);
  text-wrap: balance;
  margin: 0;
}
.h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, var(--text-3xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
  text-wrap: balance;
  margin: 0;
}
.h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, var(--text-3xl));   /* 28→44 — subtelnie ścieśnione vs. v0 */
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
  text-wrap: balance;
  margin: 0;
}
.h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semibold);
  text-wrap: balance;
  margin: 0;
}
.h4 {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semibold);
  margin: 0;
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--accent-on-bg);
  font-feature-settings: "tnum";  /* tabular numerals — replaces mono */
  margin: 0;
}
.lede {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--fg-2);
  text-wrap: pretty;
  font-weight: var(--weight-regular);
  margin: 0;
  max-width: 60ch;
}
.body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-2);
  font-weight: var(--weight-regular);
  margin: 0;
}
.small {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}
.caption {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}

/* ---- Number-emphatic helper (replaces mono in metrics) ---- */
.tnum {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}