/* ============================================================
 * Videnda landing — foundation tokens.
 * Generated from APP_FIDELITY_SPEC.md §1 (source of truth:
 * lib/core/theme/ledger_theme.dart + app_theme.dart).
 * Scenes read roles, never hexes. Hairlines stay alpha colors
 * (31/255 light, 36/255 dark) — they draw over card AND paper.
 * ============================================================ */

/* ---- Fonts — self-hosted woff2 of the app's exact static TTFs.
 * Never Google-hosted variable Fraunces (opsz changes letterforms). */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-SemiBold.v2.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-Black.v2.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Regular.v2.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Medium.v2.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.v2.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Medium.v2.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-SemiBold.v2.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Courier Prime';
  src: url('../fonts/CourierPrime-Regular.v2.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens ---- */
:root {                                    /* light = "the journal's paper interior" */
  --paper:   #F5F0E6;  --card:  #FBF8F1;  --recess: #EFE7D8;
  --ink:     #1B2A41;  --ink2:  #5B6B7F;
  --hairline: rgba(27,42,65,.122);         /* ink @ 0x1F = 31/255, NOT ".12" */
  --accent:  #B3432B;  --accent-text: #8F3520;
  --green:   #2E5339;  --green-text:  #2E5339;  --on-green: #F5F0E6;
  --graphite:#6E6A5E;

  /* paper-grain tile (alpha-channel noise, tool/gen_noise_tile.py seed 43) */
  --grain-tile: url('/assets/grain.png');
}
[data-theme="passport"] {                  /* dark = "the navy passport cover" */
  --paper:   #0E1B2C;  --card:  #16283E;  --recess: #0A1420;
  --ink:     #F5F0E6;  --ink2:  #93A3B8;
  --hairline: rgba(245,240,230,.141);      /* cream @ 0x24 = 36/255 */
  --accent:  #C9A959;  --accent-text: #E4C97E;
  --green:   #3F7351;  --green-text:  #5F936F;  --on-green: #F5F0E6;
  --graphite:#8F8A7C;
}

/* ---- Ground ---- */
body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-synthesis: none;
}

/* Paper grain: one fixed ground for the whole page (like MaterialApp.builder).
 * Ink tinted through the tile's alpha channel — never a flat 5% noise overlay. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--ink);
  -webkit-mask-image: var(--grain-tile);
  mask-image: var(--grain-tile);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: 256px 256px;   /* never scale the tile */
  mask-size: 256px 256px;
  opacity: .05;
}
/* No mask support -> omit the layer entirely (clean paper beats wrong grain). */
@supports not (mask-repeat: repeat) {
  body::before { content: none; }
}

/* ---- Type scale (Flutter height = unitless lh; letterSpacing = px) ---- */
.t-display-s  { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 34px;   line-height: 1.12; }
.t-headline-m { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 26px;   line-height: 1.18; }
.t-title-l    { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 19px;   line-height: 1.25; }
.t-title-m    { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 16px;   line-height: 1.4; }
.t-body-l     { font-family: 'Inter', system-ui, sans-serif; font-weight: 400; font-size: 16px;   line-height: 1.5; }
.t-body-m     { font-family: 'Inter', system-ui, sans-serif; font-weight: 400; font-size: 14.5px; line-height: 1.5; }
.t-body-s     { font-family: 'Inter', system-ui, sans-serif; font-weight: 400; font-size: 12.5px; line-height: 1.45; color: var(--ink2); }
.t-label-l    { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 15px;   line-height: 1.2; }
.t-label-m    { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; font-size: 12px;   line-height: 1.3; letter-spacing: .8px; color: var(--ink2); }
.t-label-s    { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 400; font-size: 10.5px; line-height: 1.3; letter-spacing: .8px; color: var(--ink2); }
.t-title-s    { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; font-size: 11.5px; line-height: 1.4; letter-spacing: 1.2px; }
.t-note       { font-family: 'Courier Prime', 'Courier New', monospace; font-weight: 400; font-size: 16px;   line-height: 1.6; }  /* ceremony */
.t-note--card { font-size: 15px;   line-height: 1.5; }   /* memory card */
.t-note--list { font-size: 12.5px; line-height: 1.35; }  /* list card */

/* ---- Chrome (spacing grid 4/8/16/24/32 · elevation 0, no shadows anywhere) ---- */
.v-card {
  background-color: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: none;
}
.v-chip {                                  /* inputs / recess fills */
  background-color: var(--recess);
  border: none;
  border-radius: 12px;
}
.v-seal-chip {                             /* CATEGORY · MUST-SEE · UNESCO 1983 */
  display: inline-block;
  padding: 3px 8px;
  border: 1.2px solid currentColor;
  border-radius: 3px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 400;
  font-size: 10.5px;
  line-height: 1.3;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.v-btn {                                   /* filled: ink on paper, stadium */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  background-color: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
}
.v-btn-outline {                           /* outlined: 1.2px ink border */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  background-color: transparent;
  color: var(--ink);
  border: 1.2px solid var(--ink);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
}