/* =========================================================================
   KaRiniTi Design System — Design Tokens
   Paper Goods Brand · Tel Aviv · est. 2017
   ========================================================================= */

@font-face {
  font-family: "Bebas Neue";
  src: url("fonts/BebasNeue.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bebas";
  src: url("fonts/Bebas-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bebas Kai";
  src: url("fonts/BebasKai.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Body / mono companions — system-grade, paper-friendly */
@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@400;500;600;700&display=swap");

:root {
  /* ---------- INK & PAPER (mono spine) ---------- */
  --ink-000: #0A0A0A;       /* near-black, primary ink */
  --ink-100: #1B1B1B;
  --ink-200: #2E2E2E;
  --ink-300: #4A4A4A;
  --ink-400: #6E6E6E;
  --ink-500: #8E8E8E;
  --ink-600: #B5B5B5;
  --ink-700: #D6D6D6;
  --ink-800: #E8E8E6;
  --ink-900: #F2F1ED;       /* paper grey */

  --paper:   #F5F4F0;       /* off-white / paper tone */
  --paper-pure: #FFFFFF;    /* pure white for product shots */
  --paper-kraft: #E5DFD2;   /* kraft / packaging tone */

  /* ---------- ACCENTS (sparing, product-driven) ---------- */
  --accent-lemon:   #F2E96B; /* "lemonade" notebook */
  --accent-blush:   #F2C9C2; /* pink memos */
  --accent-mint:    #C9E3CD; /* sustainability mark */
  --accent-stamp:   #D94A38; /* red rubber stamp / "URGENT" */

  /* semantic */
  --bg:           var(--paper);
  --bg-elevated: var(--paper-pure);
  --fg:          var(--ink-000);
  --fg-muted:    var(--ink-400);
  --fg-subtle:   var(--ink-500);
  --rule:        var(--ink-000);
  --rule-hair:   var(--ink-700);
  --rule-grid:   var(--ink-800);

  /* ---------- TYPE STACK ---------- */
  --font-display: "Bebas Neue", "Bebas", "Bebas Kai", "Helvetica Neue", Impact, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  --font-hebrew:  "Heebo", "Assistant", "Inter", sans-serif;

  /* ---------- TYPE SCALE ---------- */
  /* Print scale (1rem = 16px web base; print uses pt) */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    21px;
  --text-xl:    28px;
  --text-2xl:   40px;
  --text-3xl:   56px;
  --text-4xl:   80px;
  --text-5xl:   120px;
  --text-6xl:   180px;

  --leading-tight:   1.05;
  --leading-snug:    1.18;
  --leading-normal:  1.45;
  --leading-loose:   1.65;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-display: 0.02em;
  --tracking-stamp:  0.18em;

  /* ---------- SPACING (8pt grid + 4pt half) ---------- */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---------- RULES & RADII ---------- */
  --hairline: 0.5px;
  --rule-1:   1px;
  --rule-2:   1.5px;
  --rule-3:   2px;
  --rule-4:   3px;

  --radius-0: 0;          /* default — KaRiniTi is sharp-cornered */
  --radius-1: 2px;        /* tactile */
  --radius-2: 6px;        /* form fields only */
  --radius-pill: 999px;

  /* ---------- SHADOWS (used very rarely) ---------- */
  --shadow-paper: 0 1px 0 var(--ink-700), 0 6px 14px -6px rgba(0,0,0,0.18);
  --shadow-lift:  0 12px 32px -16px rgba(0,0,0,0.28);

  /* ---------- MOTION ---------- */
  --ease-paper:  cubic-bezier(.2, .7, .1, 1);
  --dur-fast:    140ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;

  /* ---------- LAYOUT ---------- */
  --container: 1240px;
  --gutter:    var(--s-6);

  /* Workflow chart cell — the structural heartbeat of the brand */
  --chart-cell: 24px;
}

/* ---------- BASE RESET (scoped, opinionated) ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }

::selection { background: var(--ink-000); color: var(--paper); }

/* ---------- DISPLAY UTILITIES ---------- */
.kt-wordmark {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
  text-transform: none;
  display: inline-block;
}

/* The signature alternating-case wordmark */
.kt-wordmark--alt {
  font-family: var(--font-display);
  font-size: 1em;
  letter-spacing: 0.02em;
}
.kt-wordmark--alt em { font-style: normal; text-transform: lowercase; }

/* Hebrew text helper */
[dir="rtl"], .rtl {
  font-family: var(--font-hebrew);
  direction: rtl;
  text-align: right;
}

/* The chart background — scaffolding for layouts */
.kt-chart-bg {
  background-image:
    linear-gradient(to right, var(--rule-grid) var(--hairline), transparent var(--hairline)),
    linear-gradient(to bottom, var(--rule-grid) var(--hairline), transparent var(--hairline));
  background-size: var(--chart-cell) var(--chart-cell);
}

/* Hard rule used everywhere */
.kt-rule {
  height: 0;
  border: 0;
  border-top: var(--rule-3) solid var(--ink-000);
  margin: 0;
}
.kt-rule--hair { border-top-width: var(--rule-1); border-top-color: var(--ink-700); }
.kt-rule--mid  { border-top-width: var(--rule-2); }

/* Stamp text — uppercase, tracked-out, small */
.kt-stamp {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-stamp);
  font-size: var(--text-xs);
  color: var(--ink-300);
}