/* ============================================================
   NAOMI GAL — heARTist · Design System
   colors_and_type.css
   ------------------------------------------------------------
   A monochrome, hand-made brand: black marker ink on sketch
   paper, set in Helvetica. One quiet accent — the hostage
   "Bring Them Home" ribbon yellow. Built for remembrance.
   ============================================================ */

/* ---------- FONTS ---------- */
@font-face {
  font-family: "Helvetica Now";
  src: url("fonts/Helvetica-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvetica Now";
  src: url("fonts/Helvetica.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvetica Now";
  src: url("fonts/Helvetica-Oblique.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Helvetica Now";
  src: url("fonts/Helvetica-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvetica Now";
  src: url("fonts/Helvetica-BoldOblique.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
/* Condensed display — big, urgent headlines (poster/protest voice) */
@font-face {
  font-family: "Helvetica Compressed";
  src: url("fonts/Helvetica-Compressed.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Rounded bold — softer, used for stickers / merch / friendly labels */
@font-face {
  font-family: "Helvetica Rounded";
  src: url("fonts/Helvetica-Rounded-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Naomi's actual handwriting — her hand, as a font. Use SPARINGLY. */
@font-face {
  font-family: "Naomi Hand";
  src: url("fonts/NaomiHand-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* ---------- CORE PALETTE ---------- */
  --ink:        #14110f;   /* marker black — never pure #000 */
  --ink-soft:   #2c2724;   /* secondary text */
  --graphite:   #6b6259;   /* tertiary / captions */
  --pencil:     #a59d92;   /* hairlines, disabled, meta */

  --paper:      #f7f2e9;   /* warm sketch paper — primary surface */
  --paper-2:    #efe8da;   /* recessed paper / cards on paper */
  --paper-deep: #e6ddcb;   /* borders on paper, torn edges */
  --white:      #fdfbf6;   /* a cleaner sheet, modals, fields */

  /* ---------- ACCENT — the ribbon ---------- */
  --ribbon:     #f2b705;   /* Bring Them Home yellow — used sparingly */
  --ribbon-ink: #c8920a;   /* yellow text on paper (passes contrast) */
  --ribbon-soft:#fceeb8;   /* yellow wash / highlight */

  /* ---------- SIGNATURE MARKER RED ---------- */
  --marker-red:  #c8362b;  /* the red marker in her hand — heart, urgency, life */
  --marker-red-ink: #a52a20;/* red text on paper (passes contrast) */
  --marker-red-soft:#f6d9d3;/* red wash / underline highlight */

  /* ---------- SECONDARY MEANING ---------- */
  --memory:     #7a1f1f;   /* deep oxblood red — loss / "of blessed memory" */
  --hope:       #2f5d50;   /* muted green — reunion / "living color" */

  /* ---------- SEMANTIC ROLES ---------- */
  --fg1: var(--ink);
  --fg2: var(--ink-soft);
  --fg3: var(--graphite);
  --fg4: var(--pencil);
  --bg1: var(--paper);
  --bg2: var(--paper-2);
  --bg3: var(--paper-deep);
  --surface: var(--white);
  --line: #ddd2bf;          /* default hairline on paper */
  --line-strong: var(--ink);/* drawn / marker rule */
  --accent: var(--ribbon);
  --accent-ink: var(--ribbon-ink);

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans: "Helvetica Now", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Helvetica Compressed", "Helvetica Now", Arial Narrow, sans-serif;
  --font-rounded: "Helvetica Rounded", "Helvetica Now", sans-serif;
  --font-hand: "Naomi Hand", "Bradley Hand", "Marker Felt", cursive;
  --track-hand: -0.05em;   /* Naomi Hand always wants tighter tracking */
  /* The handwritten voice IS Naomi's hand. Use for signatures, page numbers,
     marker captions, the reunion-page promise — never body. */

  /* ---------- TYPE SCALE (1.250 major third) ---------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 17px;
  --text-md:   21px;
  --text-lg:   27px;
  --text-xl:   36px;
  --text-2xl:  52px;
  --text-3xl:  76px;
  --text-4xl:  108px;

  --leading-tight: 1.04;
  --leading-snug:  1.18;
  --leading-body:  1.6;

  /* tracking — Helvetica display wants a hair of space; eyebrows want wide */
  --track-display: 0em;
  --track-tight:   -0.01em;
  --track-eyebrow:  0.22em;

  /* ---------- SPACING (4px base) ---------- */
  --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;

  /* ---------- RADII — coherent, modern, proportional ----------
     One geometric step of 1.6×. Nesting rule: an inner corner =
     outer radius − the gap/padding between them, so concentric
     elements stay optically parallel.  --radius-md is the workhorse
     (buttons, fields); cards step up; panels/modals step up again. */
  --radius-none: 0px;
  --radius-xs: 6px;        /* chips, tags, inner content boxes */
  --radius-sm: 10px;       /* buttons, inputs, search */
  --radius-md: 14px;       /* small cards (portraits, reels) */
  --radius-lg: 20px;       /* product cards, forms */
  --radius-xl: 28px;       /* modals, large panels */
  --radius-full: 999px;    /* only for the ribbon dot / avatars */

  /* ---------- SHADOWS — like a sheet resting on a table ---------- */
  --shadow-sheet: 0 1px 0 rgba(20,17,15,.04), 0 2px 8px rgba(20,17,15,.06);
  --shadow-lift:  0 2px 4px rgba(20,17,15,.06), 0 12px 28px rgba(20,17,15,.12);
  --shadow-press: inset 0 1px 3px rgba(20,17,15,.18);
  --shadow-tape:  0 1px 2px rgba(20,17,15,.10);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
.ng-eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg3);
}
.ng-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--fg1);
}
.ng-h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg1);
}
.ng-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-tight);
  color: var(--fg1);
}
.ng-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--fg1);
}
.ng-lede {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--fg2);
}
.ng-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg2);
}
/* The story voice — present tense, italic, reverent */
.ng-story {
  font-family: var(--font-sans);
  font-weight: 400;
  font-style: italic;
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--fg1);
  text-wrap: pretty;
}
.ng-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--fg3);
}
.ng-meta {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg4);
}