/* ============================================================
   CARIBBEAN PRINCESS — OFFLINE SHIP GUIDE
   Design language: "Chart Plate"
   A 1950s nautical chart crossed with an ocean-liner travel poster.
   Hull navy ground · brass hairlines · shallow-water turquoise ·
   sun-bleached coral · aged chart-paper light mode.
   ============================================================ */

/* ---------- Self-hosted variable fonts (no network at runtime) ---------- */
@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-var.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-stretch: 100%;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../assets/fonts/instrumentsans-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* ---------- Sea & hull ---------- */
  --abyss:      #04141f;   /* deepest water */
  --hull:       #07202f;   /* page ground */
  --hull-2:     #0a2a3c;   /* raised ground */
  --plate:      #0d3347;   /* card surface */
  --plate-2:    #124055;   /* card surface, raised */
  --plate-3:    #17506a;   /* pressed / active */

  /* ---------- Water ---------- */
  --deep-water: #0f5f74;
  --turquoise:  #2ec4b6;   /* primary */
  --shallow:    #6fe3d4;   /* bright accent */
  --foam:       #c2f5ec;

  /* ---------- Land, sun & brass ---------- */
  --brass:      #e0aa4e;   /* hairlines, premium */
  --brass-dim:  #a67c33;
  --coral:      #ff6b53;   /* warnings, paid, heat */
  --hibiscus:   #ff4d87;   /* kids */
  --orchid:     #a97bff;   /* adults only */
  --palm:       #3fbf7f;   /* included / free */
  --chart-paper:#f2e7d0;

  /* ---------- Ink ---------- */
  --ink:        #eef7f6;
  --ink-2:      #a7c6ce;
  --ink-3:      #8fb3bd;   /* raised for AA on small text */
  --ink-4:      #7c9daa;

  /* ---------- Lines ---------- */
  --hair:       rgba(224, 170, 78, .22);   /* brass hairline */
  --hair-soft:  rgba(224, 170, 78, .11);
  --hair-hot:   rgba(224, 170, 78, .48);
  --rule:       rgba(111, 227, 212, .14);

  /* ---------- Semantic ---------- */
  --free:   var(--palm);
  --paid:   var(--brass);
  --kids:   var(--hibiscus);
  --adults: var(--orchid);
  --warn:   var(--coral);
  --info:   var(--shallow);

  /* ---------- Type ---------- */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fraunces variable axes — soft, slightly wonky, poster-ish */
  --wonk-display: 'SOFT' 40, 'WONK' 1, 'opsz' 120;
  --wonk-ui:      'SOFT' 30, 'WONK' 0, 'opsz' 36;

  /* ---------- Shape & space ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --pad:  17px;

  /* ---------- Thumb ergonomics ---------- */
  --tap:      48px;
  --tabbar-h: 64px;
  --safe-b:   env(safe-area-inset-bottom, 0px);
  --safe-t:   env(safe-area-inset-top, 0px);

  /* ---------- Elevation ---------- */
  --lift-1: 0 1px 0 rgba(255,255,255,.04), 0 2px 6px rgba(0,0,0,.4);
  --lift-2: 0 1px 0 rgba(255,255,255,.05), 0 10px 30px rgba(0,0,0,.48);
  --lift-3: 0 24px 60px rgba(0,0,0,.62);
  --glow:   0 0 0 1px var(--hair-hot), 0 8px 30px rgba(46,196,182,.18);

  /* ---------- Gradients ---------- */
  --g-water:  linear-gradient(158deg, #14607a 0%, #0a2a3c 72%);
  --g-tropic: linear-gradient(112deg, #6fe3d4 0%, #2ec4b6 42%, #0f5f74 100%);
  --g-sunset: linear-gradient(112deg, #e0aa4e 0%, #ff6b53 58%, #ff4d87 100%);
  --g-brass:  linear-gradient(180deg, rgba(224,170,78,.28), rgba(224,170,78,0));
  --g-sheen:  linear-gradient(180deg, rgba(194,245,236,.075), rgba(194,245,236,0) 62%);

  /* ---------- Deck-map plate ---------- */
  --map-hull:  rgba(7,32,47,.92);   /* the inked hull body */
  --map-hatch: rgba(111,227,212,.20);
  --map-rule:  rgba(224,170,78,.55);
  --map-tick:  rgba(224,170,78,.40);
  --map-cut:   rgba(4,20,31,.60);   /* zone outlines & corridor */
  --map-label: #04141f;             /* text sitting on a coloured zone */
  --map-anno:  #8fb3bd;             /* annotations OUTSIDE the hull */

  /* ---------- Ground textures ---------- */
  /* Depth contours: stacked nautical isobath curves */
  --contours: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='300' viewBox='0 0 420 300'%3E%3Cg fill='none' stroke='%236fe3d4' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M-40 60C60 20 150 96 250 56s150-40 250 6'/%3E%3Cpath d='M-40 96C60 56 150 132 250 92s150-40 250 6'/%3E%3Cpath d='M-40 150C70 106 140 190 250 148s140-34 250 12'/%3E%3Cpath d='M-40 206C70 162 140 246 250 204s140-34 250 12'/%3E%3Cpath d='M-40 262C70 218 140 302 250 260s140-34 250 12'/%3E%3C/g%3E%3Cg fill='%236fe3d4' fill-opacity='.13'%3E%3Ccircle cx='95' cy='128' r='1.6'/%3E%3Ccircle cx='320' cy='84' r='1.6'/%3E%3Ccircle cx='205' cy='232' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  /* Fine film grain */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  --grain-opacity: .045;
}

/* ============================================================
   LIGHT MODE — "Chart Paper"
   Aged survey chart: warm paper, navy ink, brass rules.
   Not a washed-out inversion; a genuinely different artifact.
   ============================================================ */
:root[data-theme="light"] {
  --abyss:      #e6d9bd;
  --hull:       #f4ecd9;
  --hull-2:     #efe4cd;
  --plate:      #fffaf0;
  --plate-2:    #f7eeda;
  --plate-3:    #efe2c6;

  --deep-water: #0d5f74;
  --turquoise:  #0a7d76;
  --shallow:    #0d6a72;
  --foam:       #0a4a54;

  --brass:      #7d5514;   /* darkened: AA on cream at small sizes */
  --brass-dim:  #b8934e;
  --coral:      #cf4630;
  --hibiscus:   #c81f60;
  --orchid:     #6f38cf;
  --palm:       #1c7f52;

  --ink:        #0b2b3a;
  --ink-2:      #3c5f6d;
  --ink-3:      #4d6d7b;   /* raised for AA on cream */
  --ink-4:      #5c7c8a;

  --hair:       rgba(11, 43, 58, .18);
  --hair-soft:  rgba(11, 43, 58, .09);
  --hair-hot:   rgba(154, 108, 31, .55);
  --rule:       rgba(11, 43, 58, .12);

  --lift-1: 0 1px 2px rgba(58, 42, 16, .10);
  --lift-2: 0 8px 26px rgba(58, 42, 16, .14);
  --lift-3: 0 22px 56px rgba(58, 42, 16, .20);
  --glow:   0 0 0 1px var(--hair-hot), 0 8px 26px rgba(10,125,118,.16);

  --g-water:  linear-gradient(158deg, #dfeeea 0%, #f4ecd9 72%);
  --g-sheen:  linear-gradient(180deg, rgba(11,43,58,.045), rgba(11,43,58,0) 62%);
  --g-brass:  linear-gradient(180deg, rgba(154,108,31,.16), rgba(154,108,31,0));

  --contours: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='300' viewBox='0 0 420 300'%3E%3Cg fill='none' stroke='%230b2b3a' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M-40 60C60 20 150 96 250 56s150-40 250 6'/%3E%3Cpath d='M-40 96C60 56 150 132 250 92s150-40 250 6'/%3E%3Cpath d='M-40 150C70 106 140 190 250 148s140-34 250 12'/%3E%3Cpath d='M-40 206C70 162 140 246 250 204s140-34 250 12'/%3E%3Cpath d='M-40 262C70 218 140 302 250 260s140-34 250 12'/%3E%3C/g%3E%3Cg fill='%230b2b3a' fill-opacity='.14'%3E%3Ccircle cx='95' cy='128' r='1.6'/%3E%3Ccircle cx='320' cy='84' r='1.6'/%3E%3Ccircle cx='205' cy='232' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  --grain-opacity: .06;

  /* Chart-paper mode keeps an inked hull, but the surrounding
     annotations must darken or they vanish on cream. */
  --map-hull:  rgba(9,38,52,.94);
  --map-hatch: rgba(194,245,236,.16);
  --map-rule:  rgba(154,108,31,.75);
  --map-tick:  rgba(154,108,31,.55);
  --map-cut:   rgba(4,20,31,.55);
  --map-anno:  #55707d;
}