/* Hafenpass design tokens. Source of truth for web; mirrors Hafenpass/App/Theme.swift and Fonts.swift.
   Two materials: the COVER (wine red, gold foil) and PAPER (pale green-grey with petrol guilloche).
   Ink colors belong to stamps only. Petrol is reserved for NautiDeals and is not used yet. */

@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap; src: url("fonts/BarlowCondensed-Medium.ttf") format("truetype"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("fonts/BarlowCondensed-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("fonts/BarlowCondensed-Bold.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("fonts/Barlow-Regular.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("fonts/Barlow-Medium.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("fonts/Barlow-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexMono-Medium.ttf") format("truetype"); }

:root {
  /* Cover */
  --cover: #6B1A2B;
  --cover-deep: #501220;
  --cover-line: rgba(214, 177, 96, .28);
  --gold: #D6B160;
  --gold-light: #E9CF8E;
  --on-cover: #F6ECD6;
  --on-cover-muted: #E3CBB6;

  /* Paper */
  --paper: #EEF2EC;
  --paper-shade: #DCE3DA;
  --paper-ink: #18263B;
  --paper-muted: #4D5A70;
  --paper-line: rgba(24, 38, 59, .22);
  --guilloche: #2F6F73;
  --pass-red: #6B1A2B;

  /* Wood (the stamping tool) */
  --wood-light: #BE8C57;
  --wood-mid: #9A6839;
  --wood-dark: #84552C;

  /* Stamp inks */
  --ink-blue: #27458F;
  --ink-red: #AE3328;
  --ink-green: #1C6A50;
  --ink-violet: #5A3B86;
  --ink-black: #27303E;

  /* Type */
  --f-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (rem, 16px base): display headings in Condensed, body in Barlow */
  --t-hero: clamp(2.4rem, 4.6vw, 3.8rem);
  --t-h2: clamp(2rem, 4vw, 3rem);
  --t-h3: 1.5rem;
  --t-lead: 1.25rem;
  --t-body: 1.0625rem;
  --t-small: .875rem;
  --t-label: .75rem;

  /* Space, radius, shadow */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 5rem;
  --r-paper: 5px;      /* paper sheets: barely rounded, it is paper */
  --r-button: 10px;    /* pass buttons */
  --r-phone: 2.4rem;
  --shadow-paper: 0 16px 30px -14px rgba(20, 4, 8, .75), inset 0 0 0 1px rgba(255, 255, 255, .35);
  --shadow-lift: 0 34px 38px -10px rgba(10, 2, 4, .6);

  /* The guilloche tile from the prototype: five crossing waves, petrol at 14 % */
  --guilloche-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='48' viewBox='0 0 120 48'%3E%3Cg fill='none' stroke='%232F6F73' stroke-opacity='.14' stroke-width='.8'%3E%3Cpath d='M0 12c20-16 40 16 60 0s40 16 60 0'/%3E%3Cpath d='M0 24c20-16 40 16 60 0s40 16 60 0'/%3E%3Cpath d='M0 36c20-16 40 16 60 0s40 16 60 0'/%3E%3Cpath d='M0 18c20 16 40-16 60 0s40-16 60 0'/%3E%3Cpath d='M0 30c20 16 40-16 60 0s40-16 60 0'/%3E%3C/g%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  /* Like the app: the cover darkens, paper stays paper. */
  :root { --cover: #3A0E18; --cover-deep: #27090F; --paper: #DDE3DA; --paper-shade: #C8D0C6; }
}