/* RV Guardian theme: the shared look of the app, the website and every page.
   A wooden table at camp at sundown: wood planks, parchment cards, pine-green
   buttons, brass edges and a warm landscape. See BRAND.md for how to use it.

   Every page loads this file before its own styles. Change a colour or the
   wood here and it changes everywhere. Don't copy these values into a page;
   use the variables. */

/* Headings: Fira Sans Condensed, SIL Open Font License (vendor/fonts/OFL.txt).
   Included in the app so it works offline. */
@font-face { font-family: 'RVG Display'; font-weight: 600; font-display: swap;
             src: url('vendor/fonts/fira-sans-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'RVG Display'; font-weight: 700; font-display: swap;
             src: url('vendor/fonts/fira-sans-condensed-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'RVG Display'; font-weight: 800; font-display: swap;
             src: url('vendor/fonts/fira-sans-condensed-latin-800-normal.woff2') format('woff2'); }

:root {
  /* Type */
  --display: 'RVG Display', 'Segoe UI', system-ui, sans-serif;   /* headings, titles, tab labels */
  --text: 'Segoe UI', system-ui, -apple-system, sans-serif;     /* everything else */

  /* Wood: the background behind everything. Grain is noise stretched along
     the board, with a seam every 119px. Always use with --wood-size. */
  --wood-base: #7C4A24;
  --wood: linear-gradient(to bottom, rgba(0,0,0,0) 0 116px, rgba(30,15,5,.55) 116px 118px, rgba(255,220,170,.10) 118px 119px, rgba(0,0,0,0) 119px),
              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='238'%3E%3Cfilter id='g' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003125 0.109244' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.20 0 0 0 0 0.09 0 0 0 0 0.03 0 0 0 -2.2 1.55'/%3E%3C/filter%3E%3Cfilter id='l' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.00625 0.218487' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.62 0 0 0 0 0.30 0 0 0 1.9 -1.05'/%3E%3C/filter%3E%3Crect width='640' height='238' filter='url(%23g)'/%3E%3Crect width='640' height='238' filter='url(%23l)'/%3E%3C/svg%3E");
  --wood-size: 100% 119px, 640px 238px;
  /* Darker wood for bars: headers, the tab bar, dark sections. */
  --dark-wood: linear-gradient(rgba(35,18,6,0.5), rgba(35,18,6,0.68)), var(--wood);
  --dark-wood-size: 100% 100%, 100% 119px, 640px 238px;
  --dark-wood-base: #4A2B14;
  --page-edge: #3A2312;              /* behind the app on wide screens */

  /* Parchment: cards, sheets, forms */
  --paper: linear-gradient(180deg, #FAF2E0, #F0E1C2);
  --paper-edge: #D2B987;
  --paper-shadow: 0 3px 8px rgba(30,15,5,0.4), inset 0 1px 0 rgba(255,255,255,0.65);

  /* Buttons and accents */
  --pine: linear-gradient(180deg, #4E9A49, #2C682F);    /* the main action */
  --pine-d: #1E4A22;
  --pine-hi: #9BDC74;                                  /* the open tab's underline */
  --leather: linear-gradient(180deg, #7E4D2A, #5B3419); /* chips, quiet buttons */
  --leather-d: #3E230F;
  --brass: #C9A04E;                                    /* edges and rules */
  --gold: #E9C77B;                                     /* highlighted words on wood */
  --cream: #FBF0D6;                                    /* text on wood */

  /* Text on parchment */
  --ink: #5A3418;          /* titles and values */
  --ink-muted: #75614A;    /* secondary text */
  --body-ink: #2C2F3A;     /* body text */

  /* Status */
  --overdue: linear-gradient(135deg, #E0661F, #A8380E);
  --danger: #B91C1C;
  --warn: #B45309;
  --ok: #047857;

  /* The logo's own colours. Used only inside the logo (icons/logo.svg),
     never for the interface. */
  --logo-navy: #0E3B7C;
  --logo-navy-d: #0A2B5E;
  --logo-green: #3ED3A0;
}