/* Waifu Rips tokens + self-hosted @font-face. Owner: home builder. Palette: ~/General/waifurips-brand/BRAND.md
   (every hex there was read off Waifu Tower's own SVG fills). Everything is prefixed --wr- because the app
   already has --ink, --navy, --gold, --pink, --sky ... with other values (style.css, stamps.css, clips-feed.css).
   CSP is font-src 'self': no Google Fonts at runtime, the woff2 files live in ./fonts. */

/* Display: Titan One (SIL OFL). Same file the app already ships in assets/fonts. */
@font-face { font-family: 'WR Titan'; font-style: normal; font-weight: 400; font-display: block;
  src: url(fonts/titan-one-400.woff2) format('woff2'); }
/* UI body: Nunito (SIL OFL), the variable woff2 (wght axis), Latin subset. Katakana accent: Dela Gothic One (SIL OFL),
   Latin subset (the logo's katakana is baked into its art; this face only sets Latin accents). Both came from Google
   Fonts' CSS (css2?family=Nunito:wght@600..900&family=Dela+Gothic+One, 22 Oct 2026); unicode-range is that CSS's latin. */
@font-face { font-family: 'WR Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url(fonts/nunito-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'WR Dela'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/dela-gothic-one-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --wr-display: 'WR Titan', 'Titan One', system-ui, sans-serif;
  --wr-body: 'WR Nunito', Nunito, ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wr-kata: 'WR Dela', 'Dela Gothic One', 'Hiragino Sans', sans-serif;

  /* sky + wall */
  --wr-sky-hi: #B8D4FF; --wr-sky: #97C0FF; --wr-sky-lo: #8CB6F6; --wr-cloud: #C9DEFF;
  --wr-wall: #616CCD; --wr-wall-mid: #6B76D7; --wr-wall-lo: #616CCD; --wr-wall-hi: #9BAAFF; --wr-wall-deep: #525DBD;
  --wr-brick-lt: #7A86EB;
  /* light stone */
  --wr-stone: #E8E3FF; --wr-stone-2: #D9D2FF; --wr-stone-3: #C4BBF9; --wr-pit: #9D94E1;
  --wr-navy: #272F71; --wr-ink: #181818;
  /* dark bricks */
  --wr-well: #0A0819; --wr-tile: #242038; --wr-tile-line: #473F6F; --wr-tile-edge: #3A3360;
  --wr-night: #110E24; --wr-night-2: #1A1733;
  /* accents */
  --wr-btn: #7717FF; --wr-btn-hi: #8B3BFF; --wr-btn-lo: #6512E0;
  --wr-violet: #6F30F9; --wr-peri: #7F71FB; --wr-lilac: #BEAAFE;
  --wr-pink: #FFB6E3; --wr-hot: #F363FF; --wr-gold: #FCC97E; --wr-cyan: #B2F1FF; --wr-up: #7CF0B4;
  /* text on dark */
  --wr-text: #FFFFFF; --wr-text-2: #C9C3EE; --wr-text-dim: #8E87B8;

  /* brick patterns (tile fill, hot tile, faint panel) */
  --wr-brick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='31'%3E%3Cpath d='M0 15.5H60M0 30.5H60M15.5 0V15.5M45.5 0V15.5M.5 15.5V31M30.5 15.5V31' stroke='%23473F6F' stroke-opacity='.6' fill='none'/%3E%3C/svg%3E");
  --wr-brick-hot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='31'%3E%3Cpath d='M0 15.5H60M0 30.5H60M15.5 0V15.5M45.5 0V15.5M.5 15.5V31M30.5 15.5V31' stroke='%23F363FF' stroke-opacity='.75' fill='none'/%3E%3C/svg%3E");
  --wr-brick-faint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='31'%3E%3Cpath d='M0 15.5H60M0 30.5H60M15.5 0V15.5M45.5 0V15.5M.5 15.5V31M30.5 15.5V31' stroke='%23473F6F' stroke-opacity='.32' fill='none'/%3E%3C/svg%3E");
  --wr-stone-strip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='14'%3E%3Crect x='1' y='1' width='26' height='12' rx='2' fill='%23E8E3FF' stroke='%23272F71' stroke-width='1.6'/%3E%3Crect x='29' y='1' width='16' height='12' rx='2' fill='%23C4BBF9' stroke='%23272F71' stroke-width='1.6'/%3E%3Crect x='47' y='1' width='16' height='12' rx='2' fill='%23D9D2FF' stroke='%23272F71' stroke-width='1.6'/%3E%3Ccircle cx='9' cy='8' r='1' fill='%239D94E1'/%3E%3C/svg%3E");

  /* hard drops, never blur */
  --wr-drop-sm: 0 4px 0 var(--wr-ink);
  --wr-drop: 0 6px 0 var(--wr-ink);

  /* layout: the phone dock's height, read by pages that must clear it */
  --wr-dock-h: 74px;

  /* THE TYPE SYSTEM (Luke, round 5: two fonts, one system, sitewide). Every builder uses these.
     DISPLAY = Titan One (the + DEPOSIT button's face): headings, section and tile titles, button labels, prices, tabs,
       plaques, badges. Weight is always 400 (Titan One has one weight); it wears the ink outline on dark ground.
     UI = Nunito 700-900 (the nav's face): nav items, body copy, small labels, table text. */
  --wr-font-display: var(--wr-display);
  --wr-font-ui: var(--wr-body);
  --wr-w-ui: 800;            /* nav items, labels */
  --wr-w-body: 700;          /* body copy */
  --wr-w-strong: 900;        /* figures in UI text */
  /* sizes: display */
  --wr-h1: 38px;             /* page / hero headline */
  --wr-h2: 26px;             /* section title (WHAT'S INSIDE) */
  --wr-h3: 19px;             /* sub-section, tabs, plaques */
  --wr-btn-size: 18px;       /* button label */
  --wr-btn-sm-size: 14px;    /* small button label */
  --wr-badge: 11px;          /* badges, flags */
  /* sizes: UI */
  --wr-body-size: 15px;      /* body copy */
  --wr-ui-size: 14px;        /* nav, controls */
  --wr-label: 12.5px;        /* small labels, table text */
  /* the outline a display word wears on dark ground (scale it with the size: ~1/5 of the font size) */
  --wr-stroke: var(--wr-ink);
}

/* the system's defaults, at zero specificity so any component may set its own: display for headings and buttons */
:where(h1, h2, h3, .wr-btn, .wr-display, .wr-plaque, .wr-flag, .wr-chip) { font-family: var(--wr-font-display); font-weight: 400; }
:where(.wr-ui) { font-family: var(--wr-font-ui); font-weight: var(--wr-w-ui); }