/* =========================================================================
   crypter Design System — tokens
   Colors, typography, scale, motion.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ============ Palette: paper & ink ============ */
  --paper-50:   #FAF7F1;
  --paper-100:  #F5F1EA;
  --paper-200:  #EAE5DB;
  --paper-300:  #D6D0C2;

  --ink-900:    #14130F;
  --ink-700:    #2B2A26;
  --ink-500:    #595650;
  --ink-300:    #9C9890;
  --ink-200:    #C7C3BB;

  --white:      #FFFFFF;
  --pure-black: #000000;

  /* ============ Palette: accents ============ */
  --signal-red:        #DC2626;
  --signal-red-hover:  #C81F1F;
  --signal-red-press:  #B11717;

  --digital-lime:      #C8FF3D;
  --digital-lime-soft: #E8FFA8;

  --alpine-blue:       #1D4ED8;
  --meadow:            #16A34A;
  --warning:           #D97706;

  /* ============ Semantic foreground / background ============ */
  --bg:          var(--paper-50);
  --bg-alt:      var(--paper-100);
  --bg-inverse:  var(--ink-900);

  --fg:          var(--ink-900);
  --fg-muted:    var(--ink-500);
  --fg-subtle:   var(--ink-300);
  --fg-inverse:  var(--paper-50);

  --border:        var(--paper-200);
  --border-strong: var(--paper-300);
  --border-inverse: rgba(255, 255, 255, 0.08);

  --accent:      var(--signal-red);
  --accent-soft: var(--digital-lime);
  --link:        var(--alpine-blue);

  /* The crypter.ch landing ships locked to signal-red; these vars route through
     every CTA, selection ring and stat highlight. */
  --accent-c:  var(--signal-red);
  --accent-h:  var(--signal-red-hover);
  --accent-on: #FFFFFF;

  /* ============ Typography families ============ */
  --font-sans:   'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:   'Geist Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
  --font-italic: 'Instrument Serif', 'Times New Roman', serif;

  /* ============ Type scale (px, 16 base) ============ */
  --fs-12: 12px;  --fs-13: 13px;  --fs-14: 14px;  --fs-15: 15px;
  --fs-16: 16px;  --fs-18: 18px;  --fs-20: 20px;  --fs-24: 24px;
  --fs-32: 32px;  --fs-40: 40px;  --fs-56: 56px;  --fs-72: 72px;
  --fs-96: 96px;  --fs-128: 128px;

  /* ============ Spacing scale (8px base) ============ */
  --sp-1:   4px;  --sp-2:   8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-6:  24px;  --sp-8:  32px;  --sp-12: 48px; --sp-16: 64px;
  --sp-24: 96px;  --sp-32: 128px; --sp-48: 192px;

  /* ============ Radii ============ */
  --radius-0:    0px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-pill: 999px;

  /* ============ Borders ============ */
  --hairline:         1px solid var(--border);
  --hairline-strong:  1px solid var(--border-strong);
  --hairline-inverse: 1px solid var(--border-inverse);

  /* ============ Motion ============ */
  --ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-micro:   120ms;
  --dur-default: 220ms;
  --dur-entry:   400ms;
  --dur-hero:    800ms;

  /* ============ Layout ============ */
  --content-max:  1280px;
  --content-wide: 1440px;
  --gutter:        24px;
  --margin:        32px;
  --nav-height:    64px;

  /* ============ Elevation ============ */
  --shadow-sticky: 0 1px 0 rgba(20, 19, 15, 0.04);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 0ms; --dur-default: 0ms; --dur-entry: 0ms; --dur-hero: 0ms;
  }
}

/* ===========================================================================
   Semantic typography classes
   =========================================================================== */
.t-display-1, .t-display-2, .t-display-3,
.t-h1, .t-h2, .t-h3, .t-h4 {
  font-family: var(--font-sans);
  color: var(--fg);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.0;
  text-wrap: balance;
}

.t-display-1 { font-size: clamp(56px, 9vw, var(--fs-128)); font-weight: 700; letter-spacing: -0.035em; line-height: 0.92; }
.t-display-2 { font-size: clamp(48px, 7vw, var(--fs-96));  font-weight: 700; letter-spacing: -0.03em;  line-height: 0.95; }
.t-display-3 { font-size: clamp(40px, 5vw, var(--fs-72));  font-weight: 600; letter-spacing: -0.025em; line-height: 1.0; }

.t-h1 { font-size: var(--fs-56); }
.t-h2 { font-size: var(--fs-40); }
.t-h3 { font-size: var(--fs-32); line-height: 1.1; }
.t-h4 { font-size: var(--fs-24); line-height: 1.2; }

.t-body-lg { font-family: var(--font-sans); font-size: var(--fs-20); line-height: 1.5; color: var(--fg); text-wrap: pretty; }
.t-body    { font-family: var(--font-sans); font-size: var(--fs-16); line-height: 1.55; color: var(--ink-700); text-wrap: pretty; }
.t-body-sm { font-family: var(--font-sans); font-size: var(--fs-14); line-height: 1.5; color: var(--ink-700); }
.t-caption { font-family: var(--font-sans); font-size: var(--fs-13); line-height: 1.4; color: var(--fg-muted); }

.t-meta {
  font-family: var(--font-mono); font-size: var(--fs-12); line-height: 1.4;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); font-weight: 500;
}
.t-meta-lg {
  font-family: var(--font-mono); font-size: var(--fs-13);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); font-weight: 500;
}
.t-mono { font-family: var(--font-mono); font-size: var(--fs-14); color: var(--fg); }

.t-italic {
  font-family: var(--font-italic); font-style: italic; font-weight: 400; letter-spacing: -0.01em;
}

.t-link {
  color: var(--fg); text-decoration: none;
  background-image: linear-gradient(var(--digital-lime), var(--digital-lime));
  background-repeat: no-repeat; background-size: 0% 100%; background-position: 0 0;
  transition: background-size var(--dur-default) var(--ease);
  padding: 0 2px;
}
.t-link:hover { background-size: 100% 100%; }

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

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--accent-c); color: var(--accent-on); }

/* Inverse / dark section flip */
.ink { background: var(--ink-900); color: var(--paper-50); }
.ink .t-meta,
.ink .t-caption,
.ink .t-body { color: var(--paper-200); }
.ink .t-body { color: var(--paper-100); }
.ink .t-meta { color: var(--paper-300); }
.ink * { border-color: var(--border-inverse); }