/* ============================================================
   Pikt Design System — combined tokens + shared components
   (fonts, colors, typography, spacing, base, buttons, grid-bg)
   ============================================================ */

/* ---- Fonts — self-hosted (Geist v1.7.2, SIL OFL, see assets/fonts/OFL.txt) ---- */
@font-face {
  font-family: 'Geist';
  src: url('assets/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('assets/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Color tokens ---- */
:root {
  /* Ink — cool near-black neutral ramp */
  --ink-900: #0e1217;
  --ink-800: #181c22;
  --ink-700: #25292f;
  --ink-600: #3a3f46;
  --ink-500: #54595f;
  --ink-400: #65696f;
  --ink-300: #888d93;
  --ink-200: #aab0b6;

  /* Paper — warm off-white ramp */
  --paper-0:   #ffffff;
  --paper-50:  #faf8f4;
  --paper-100: #f7f5f1;
  --paper-200: #ede9e1;
  --paper-300: #e3ded4;
  --paper-400: #d6d0c4;

  /* Line — dividers & borders */
  --line:      #c0c5c9;
  --line-soft: #dcddd9;

  /* Red — the aperture accent */
  --red-700: #9a1715;
  --red-600: #b81b19;
  --red-500: #df2321;
  --red-400: #e8514f;
  --red-100: #fbe9e8;

  /* Status */
  --green-600: #2c6f4f;
  --green-500: #3c8a5f;
  --green-100: #e6f0ea;
  --amber-600: #a8680f;
  --amber-500: #c07a16;
  --amber-100: #f6ecd9;
  --blue-600: #284f8c;
  --blue-500: #2f5fa8;
  --blue-100: #e6ecf5;

  /* Surfaces */
  --surface-page:    var(--paper-100);
  --surface-card:    var(--paper-0);
  --surface-inset:   var(--paper-200);
  --surface-sunken:  var(--paper-300);
  --surface-ink:     var(--ink-900);
  --surface-ink-2:   var(--ink-800);

  /* Text */
  --text-primary:    var(--ink-900);
  --text-secondary:  var(--ink-700);
  --text-tertiary:   var(--ink-400);
  --text-disabled:   var(--ink-200);
  --text-on-ink:     var(--paper-100);
  --text-on-ink-dim: rgba(247, 245, 241, 0.62);
  --text-accent:     var(--red-500);

  /* Borders */
  --border:          var(--line);
  --border-soft:     var(--line-soft);
  --border-strong:   var(--ink-200);
  --border-ink:      rgba(247, 245, 241, 0.16);

  /* Accent */
  --accent:          var(--red-500);
  --accent-hover:    var(--red-600);
  --accent-press:    var(--red-700);
  --accent-tint:     var(--red-100);
  --on-accent:       var(--paper-0);

  /* Focus */
  --focus-ring:      rgba(223, 35, 33, 0.35);

  /* Risk / status semantics */
  --risk-low:        var(--green-500);
  --risk-low-tint:   var(--green-100);
  --risk-medium:     var(--amber-500);
  --risk-medium-tint:var(--amber-100);
  --risk-high:       var(--red-500);
  --risk-high-tint:  var(--red-100);
  --info:            var(--blue-500);
  --info-tint:       var(--blue-100);
}

/* ---- Typography tokens ---- */
:root {
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

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

  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  60px;
  --text-6xl:  76px;
  --text-7xl:  96px;

  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.035em;
  --tracking-snug:    -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.18em;

  --display-family: var(--font-sans);
  --display-weight: var(--weight-semibold);
  --display-tracking: var(--tracking-tight);

  --heading-family: var(--font-sans);
  --heading-weight: var(--weight-semibold);

  --body-family: var(--font-sans);
  --body-weight: var(--weight-regular);
  --body-size: var(--text-base);
  --body-leading: var(--leading-normal);

  --eyebrow-family: var(--font-mono);
  --eyebrow-weight: var(--weight-medium);
  --eyebrow-size: var(--text-2xs);
  --eyebrow-tracking: var(--tracking-widest);

  --data-family: var(--font-mono);
}

/* ---- Spacing, radius, shadow, motion ---- */
:root {
  --space-0:  0;
  --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;

  --radius-xs:   3px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  20px;
  --radius-full: 999px;

  --border-width: 1px;
  --border-width-strong: 1.5px;

  --shadow-xs: 0 1px 2px rgba(14, 18, 23, 0.06);
  --shadow-sm: 0 1px 3px rgba(14, 18, 23, 0.08), 0 1px 2px rgba(14, 18, 23, 0.04);
  --shadow-md: 0 4px 14px -6px rgba(14, 18, 23, 0.16);
  --shadow-lg: 0 12px 32px -12px rgba(14, 18, 23, 0.22);
  --shadow-xl: 0 24px 56px -20px rgba(14, 18, 23, 0.28);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;

  --container-max: 1200px;
  --container-wide: 1320px;
}

/* ---- Base / reset ---- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv01', 'ss01';
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-family);
  font-weight: var(--heading-weight);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

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

::selection { background: var(--red-500); color: var(--paper-0); }

.pikt-eyebrow {
  font-family: var(--eyebrow-family);
  font-weight: var(--eyebrow-weight);
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ---- Buttons ---- */
.btn {
  font-family: var(--font-sans); font-size: 15px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.btn:active { transform: translateY(.5px) scale(.995); }
.btn svg { width: 16px; height: 16px; }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ink { background: var(--ink-900); color: var(--text-on-ink); }
.btn--ink:hover { background: var(--ink-700); }
.btn--ghost { background: transparent; color: var(--text-primary); border-color: var(--border); }
.btn--ghost:hover { border-color: var(--ink-900); background: var(--surface-inset); }
.btn--ghost-ink { background: transparent; color: var(--text-on-ink); border-color: var(--border-ink); }
.btn--ghost-ink:hover { border-color: rgba(247,245,241,.5); background: rgba(247,245,241,.06); }
.btn--lg { padding: 15px 28px; font-size: 16px; }
.btn--sm { padding: 9px 16px; font-size: 14px; }

/* ---- Grid backgrounds ---- */
.grid-bg { position: absolute; inset: 0; pointer-events: none; opacity: 1; }
.grid-bg--ink {
  background:
    linear-gradient(rgba(247,245,241,.045) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(247,245,241,.045) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: radial-gradient(120% 100% at 70% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 100% at 70% 0%, #000 30%, transparent 78%);
}
.grid-bg--paper {
  background:
    linear-gradient(rgba(14,18,23,.035) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(14,18,23,.035) 1px, transparent 1px) 0 0 / 44px 44px;
}