/* ============================================================================
   AXON.PS — "Signal Manuscript" Design System
   colors_and_type.css — canonical color + type tokens
   ----------------------------------------------------------------------------
   Concept: illuminated manuscript discipline × neural signal paths ×
   Palestinian/Arab geometric intelligence. Warm parchment grounds, ink text,
   tatreez-crimson "signal", antique gold-leaf "illumination".

   Fonts are loaded from Google Fonts (see @import below). If you are working
   offline, drop the .ttf/.woff2 files into ./fonts and swap the @import for
   @font-face. The three families are the canonical brand type.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,300;1,6..72,400&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans+Arabic:wght@300;400;500&family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&display=swap');

:root {
  /* ---- PAPER (grounds) — warm linen / aged vellum -------------------------
     The dominant surface of the brand. Never pure white. */
  --paper-0: #F8F3E9;   /* primary ground — warm ivory */
  --paper-1: #F1E9D9;   /* raised panel / aside — aged linen */
  --paper-2: #E7DAC2;   /* deep linen — borders, wells, hairline fills */
  --paper-edge: #DBCBAE; /* darkest paper — strong rules, margin lines */

  /* ---- INK (text + dark grounds) — warm near-black, never #000 ----------- */
  --ink-0: #1E1B16;     /* primary ink — headlines, body */
  --ink-1: #514B40;     /* secondary ink — sub-copy, captions */
  --ink-2: #8B8270;     /* tertiary ink — faded marginalia, placeholders */
  --ink-line: #C9B89C;  /* hairline ink on paper */

  /* ---- NIGHT FIELD (the "illuminated" dark moments) ---------------------- */
  --night-0: #16130D;   /* deepest ink ground — hero / footer field */
  --night-1: #211C14;   /* raised panel on night */
  --night-line: #3A3225; /* hairline on night */
  --night-text: #EFE7D6; /* paper-toned text on night */
  --night-muted: #A99B7F;/* muted text on night */

  /* ---- SIGNAL (primary accent) — tatreez / madder crimson ----------------
     Culturally rooted (Palestinian embroidery red) AND the "signal" of the
     Axon nerve metaphor. Used for the live pulse, primary actions, accents. */
  --signal: #A62B25;
  --signal-deep: #7C1E1A;  /* pressed / on-night */
  --signal-bright: #C24038;/* hover / pulse highlight */
  --signal-tint: #EBD9CF;  /* faint crimson wash on paper */

  /* ---- GOLD (illumination accent) — antique gold leaf --------------------
     Manuscript illumination. Used sparingly: drop-initials, ornament,
     orbital rings, "live" gilding. Never as large fills. */
  --gold: #B0852E;
  --gold-bright: #CDA24A;  /* on night / highlight */
  --gold-deep: #856023;
  --gold-tint: #EEE3C8;

  /* ---- OLIVE (cultural support) — olive groves --------------------------- */
  --olive: #5E6B3B;
  --olive-tint: #E2E2CC;

  /* ---- SEMANTIC ---------------------------------------------------------- */
  --live: var(--signal);        /* an active / shipping product */
  --soon: var(--ink-2);         /* a coming-soon product */
  --link: var(--signal);
  --focus: var(--gold);
  --success: var(--olive);

  /* ---- TYPE FAMILIES ----------------------------------------------------- */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif; /* editorial serif */
  --font-sans: 'Hanken Grotesk', -apple-system, system-ui, sans-serif; /* body + UI */
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; /* folios, signal labels */
  --font-arabic: 'IBM Plex Sans Arabic', 'Newsreader', system-ui, sans-serif; /* RTL companion */
  --font-brand: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif; /* logo wordmark — distinctive display */
  /* Arabic companion (bilingual marginalia / RTL): 'IBM Plex Sans Arabic' */

  /* ---- TYPE SCALE (fluid, editorial) ------------------------------------- */
  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);  /* @kind spacing */
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 1.95rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem);
  --step-5:  clamp(3.4rem, 2.2rem + 5.6vw, 6.4rem);

  /* ---- SPACING (8px base, generous editorial rhythm) --------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4.5rem;
  --sp-9: 7rem;     --sp-10: 10rem;

  /* ---- RADII — restrained. Manuscript is mostly sharp; small softening ---- */
  --r-0: 0px;       /* rules, dividers, most panels (editorial = sharp) */
  --r-1: 3px;       /* inputs, chips */
  --r-2: 6px;       /* buttons, small panels */
  --r-full: 999px;  /* sigils, pulse dots, pills */

  /* ---- BORDERS ----------------------------------------------------------- */
  --hair: 1px solid var(--ink-line);     /* default hairline on paper */
  --hair-strong: 1px solid var(--paper-edge);
  --rule: 1.5px solid var(--ink-0);      /* manuscript margin rule */

  /* ---- ELEVATION — soft, paper-like (no hard drop shadows) ---------------- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(30, 27, 22, 0.05);
  --shadow-2: 0 6px 22px -10px rgba(30, 27, 22, 0.18);     /* lifted panel */
  --shadow-press: inset 0 2px 6px rgba(30, 27, 22, 0.12);
  --shadow-gold: 0 0 0 1px var(--gold), 0 6px 20px -12px rgba(176,133,46,0.5);

  /* ---- MOTION — calm, ink-settling. No bounce. --------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */ /* primary ease-out */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --dur-1: 160ms;  /* @kind other */ /* hover / state */
  --dur-2: 380ms;  /* @kind other */ /* reveal / move */
  --dur-3: 900ms;  /* @kind other */ /* signal travel */
}

/* ============================================================================
   SEMANTIC TYPOGRAPHY — apply these classes/elements directly
   ========================================================================== */

.t-eyebrow {            /* manuscript running-head / system label */
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.t-folio {              /* numbered folio / index, e.g. 01 — 04 */
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  color: var(--signal);
}

.t-display {            /* hero / page opener — serif, light, optical */
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--ink-0);
  text-wrap: balance;
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.012em;
  color: var(--ink-0);
  text-wrap: balance;
}

h2, .t-h2 {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.008em;
  color: var(--ink-0);
  text-wrap: balance;
}

h3, .t-h3 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-0);
}

/* Title-case section/UI labels use the grotesque, not the serif */
.t-label {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-0);
}

p, .t-body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-1);
  text-wrap: pretty;
}

.t-lead {               /* opening paragraph after a headline */
  font-family: var(--font-sans);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-1);
}

.t-small, small {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-2);
}

.t-caption {            /* mono captions / coordinates / metadata */
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

/* Illuminated drop-initial — the manuscript signature move */
.t-initial {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 3.4em;
  line-height: 0.8;
  float: left;
  margin: 0.08em 0.12em 0 0;
  color: var(--signal);
  /* gold hairline gilding under the crimson initial */
  text-shadow: 1px 1px 0 var(--gold-tint);
}

a, .t-link {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--signal) 35%, transparent);
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
a:hover, .t-link:hover { border-bottom-color: var(--signal); }

::selection { background: var(--signal-tint); color: var(--ink-0); }