/* ============================================================
   Better Call — Colors & Type
   ============================================================
   The brand is built on a 90's paper-cut / newspaper-meme
   aesthetic: warm paper cream, deep brick-red ink, halftone
   black & white photography, classified-ad type pairings.
   ------------------------------------------------------------ */

/* --------- FONTS --------- */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/InstrumentSerif-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/InstrumentSerif-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src: url("fonts/DMMono-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("fonts/DMMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("fonts/DMMono-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}


:root {
  /* ============================================================
     COLOR — Foundations
     ============================================================
     Paper, ink, and a single hot brand red. Everything else is
     a tint or a deliberate semantic accent.
  */

  /* Paper / Surface (creams + off-whites — like aged newsprint) */
  --paper:        #F4EEE2;   /* default page background */
  --paper-soft:   #EFE8DA;   /* card / inset surfaces   */
  --paper-warm:   #E8DFCB;   /* second-step inset, dividers in light mode */
  --paper-edge:   #DCCEB1;   /* envelope edge, ticket stub */

  /* Ink (almost-black, never pure black) */
  --ink:          #131210;   /* primary text on paper   */
  --ink-2:        #2A2622;   /* secondary text          */
  --ink-3:        #5A524A;   /* meta / caption          */
  --ink-4:        #8A8175;   /* disabled / placeholder  */

  /* Brand Red (the "Call." red — brick / dialed-phone) */
  --red:          #9E1F1F;   /* primary brand red       */
  --red-deep:     #7A1414;   /* pressed / hover         */
  --red-soft:     #C24242;   /* hover-lighten / link    */
  --red-bg:       #F2D7CC;   /* tinted backgrounds      */
  --red-stamp:    #B82626;   /* "RING" stamp / urgent   */

  /* Dark Mode / Inverted (the black-bg logo card) */
  --night:        #0E0D0B;   /* near-black backgrounds  */
  --night-2:      #1A1815;   /* lifted surface on night */

  /* Halftone Greys — for paper-cut photo treatments */
  --halftone-1:   #1B1916;
  --halftone-2:   #4D4843;
  --halftone-3:   #8A8278;
  --halftone-4:   #B8AFA1;
  --halftone-5:   #E2D9C8;

  /* Accent (rare — use for receipts, dollar-collage moments) */
  --accent-green: #7FA56B;   /* dollar-sign green from collage */
  --accent-pink:  #F0C5C0;   /* soft pink wash, like the typist collage bg */
  --accent-blue:  #2D3E5A;   /* deep midnight, for variants & secondary alarm */
  --tape-yellow:  #E8C766;   /* masking-tape / highlighter pop */

  /* Functional / semantic */
  --success:      #4F7B45;
  --warning:      #C48218;
  --danger:       var(--red);
  --info:         #2D3E5A;

  /* ============================================================
     SEMANTIC — Foreground / Background tokens
     ============================================================ */
  --fg-1:   var(--ink);
  --fg-2:   var(--ink-2);
  --fg-3:   var(--ink-3);
  --fg-4:   var(--ink-4);
  --fg-on-red:    var(--paper);
  --fg-on-night:  var(--paper);

  --bg-1:   var(--paper);
  --bg-2:   var(--paper-soft);
  --bg-3:   var(--paper-warm);
  --bg-inverse: var(--night);
  --bg-brand:   var(--red);

  --border-1: rgba(19,18,16,0.12);   /* hairline on paper */
  --border-2: rgba(19,18,16,0.22);   /* card border       */
  --border-strong: var(--ink);       /* the heavy 1.5–2px newspaper rule */

  /* ============================================================
     TYPE
     ============================================================ */
  --font-sans:    "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --font-serif:   "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-mono:    "DM Mono", "JetBrains Mono", ui-monospace, monospace;
  --font-display: var(--font-sans);   /* the heavy "Better" half */
  --font-italic:  var(--font-serif);  /* the script-ish "Call." half */

  /* Type scale — fluid-ish, mostly fixed (this is a brand system, not a fluid web app) */
  --t-hero:    clamp(56px, 9vw, 144px);   /* paper headline */
  --t-display: clamp(40px, 6vw, 80px);
  --t-h1:      48px;
  --t-h2:      36px;
  --t-h3:      26px;
  --t-h4:      20px;
  --t-body:    16px;
  --t-small:   14px;
  --t-meta:    12px;
  --t-micro:   10.5px;

  --leading-tight:   1.02;
  --leading-snug:    1.15;
  --leading-normal:  1.45;
  --leading-loose:   1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-meta:   0.08em;     /* small caps / labels */
  --tracking-stamp:  0.18em;     /* "OPERATOR" stamp letterspacing */

  /* ============================================================
     SPACE / RADIUS / SHADOW
     ============================================================ */
  --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;

  --r-0: 0px;
  --r-1: 2px;
  --r-2: 6px;
  --r-3: 12px;
  --r-4: 20px;
  --r-pill: 999px;

  /* Newspaper-y, not floaty: shadows are mostly hard offset prints */
  --shadow-print:  3px 3px 0 var(--ink);          /* offset hard shadow, like a stamp */
  --shadow-print-red: 3px 3px 0 var(--red);
  --shadow-card:   0 1px 0 rgba(19,18,16,0.08), 0 12px 28px -16px rgba(19,18,16,0.25);
  --shadow-lift:   0 2px 0 rgba(19,18,16,0.06), 0 24px 40px -20px rgba(19,18,16,0.32);
  --shadow-inset:  inset 0 0 0 1px rgba(19,18,16,0.10);

  --rule:          1.5px solid var(--ink); /* the everywhere newspaper rule */
  --rule-thin:     1px solid var(--border-1);
  --rule-dotted:   1.5px dotted var(--ink);
  --rule-dashed:   1.5px dashed var(--ink);

  /* Motion (90s = no easing competition; mostly crisp) */
  --ease-snap: cubic-bezier(.2,.7,.2,1);
  --ease-out:  cubic-bezier(.16,.84,.32,1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */
.t-hero {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.t-hero em, .t-hero .it { font-family: var(--font-italic); font-style: italic; font-weight: 400; color: var(--red); letter-spacing: -0.01em; }

.t-display, h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0;
}

h3, .t-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0;
}

h4, .t-h4, .t-eyebrow-lg {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0;
}

p, .t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--leading-normal);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

.t-serif, .t-quote {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.1;
  color: var(--fg-1);
}

.t-mono, code, kbd {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-small);
  letter-spacing: 0;
}

/* The "OPERATOR" / "RING RING" / metadata labels */
.t-stamp, .t-eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: var(--tracking-stamp);
  color: var(--ink-3);
}

.t-meta {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--ink-3);
}

.t-caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-small);
  color: var(--ink-3);
}

/* Logo lockup helper */
.logo-lockup {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
}
.logo-lockup .call {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--red);
  letter-spacing: -0.01em;
}