/* =====================================================================
   Soft Navy — design tokens (fonts, colours, radii, shadows)
   Part of the Soft Navy design kit (from the IAU class grouping site).
   Load order: tokens.css → components.css → motion.css
   ===================================================================== */

@font-face { font-family: "Peyda"; src: url("../fonts/peyda-300.0f462fe1871e.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Peyda"; src: url("../fonts/peyda-400.e39b2fc98545.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Peyda"; src: url("../fonts/peyda-500.64f830bfde6f.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Peyda"; src: url("../fonts/peyda-600.43561403d74b.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Peyda"; src: url("../fonts/peyda-700.ac1b74d62f1b.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Peyda"; src: url("../fonts/peyda-800.4eef48b52fec.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --canvas: #eceff3;
  --bg: #f3f5f7;
  --surface: #ffffff;
  --surface-2: #f4f6f9;
  --line: #e7ebf0;
  --text: #0d1729;
  --text-2: #3d4659;
  --muted: #8b93a3;
  --navy: #0a1a33;
  --navy-2: #172a4d;
  --navy-3: #22396a;
  --tone: #a8c1ec;          /* the light-blue second line on navy */
  --blue: #2f5aa8;          /* links / accents on light backgrounds */
  --blue-soft: #d6e2f4;
  --blue-soft-2: #e7eef9;
  --ok: #1f8a63;   --ok-soft: #e1f3eb;
  --warn: #a8670c; --warn-soft: #fbf0dd;
  --bad: #c2413a;  --bad-soft: #fbe7e5;
  --r-xl: 30px;
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 14px;
  --shadow: 0 1px 2px rgba(14, 26, 48, .04), 0 10px 30px rgba(14, 26, 48, .06);
  --shadow-lift: 0 2px 6px rgba(14, 26, 48, .06), 0 18px 40px rgba(14, 26, 48, .12);
  /* brand accents from the logo (the gold book, the cream letter) */
  --gold: #c98a1c;
  --gold-soft: #fbf1dc;
  --cream: #f7f1e3;
  --ink: #172a4d;           /* navy text/icons on soft light surfaces */
  --verified: #1d8cf0;      /* the blue tick */
  --spot: rgba(47, 90, 168, .07);
  --link-hover: #22396a;
  --hero-1: #22396a;         /* the navy block gradient: light corner → deep */
  --hero-2: #172a4d;
  --hero-3: #0a1a33;
  /* surfaces that used to be hard-coded white/grey, so the dark theme can swap them */
  --hover: #e9edf3;
  --divider: rgba(13, 23, 41, .1);
  --glass: rgba(255, 255, 255, .92);
  --glass-strong: rgba(255, 255, 255, .97);
  --ic-glass: rgba(255, 255, 255, .75);
  --chat-a: #fafbfd;
  --chat-b: #f4f6f9;
  --column: #e9edf2;
  --ring: #ffffff;           /* the gap ring around avatars and badges = the surface they sit on */
  --ambient-a: rgba(168, 193, 236, .35);
  --ambient-b: rgba(227, 163, 59, .12);
  color-scheme: light;
}

/* ---------------------------------------------------------------- dark theme
   "Dusk slate", not a black page: the canvas is a soft blue-grey and the cards sit *darker* than it,
   like panels set into the page, with lighter chips inside them. The navy blocks keep the brand blue.
   Only when the visitor picks it (theme.js sets data-theme); the site opens in the light theme. */
:root[data-theme="dark"] {
  --canvas: #19212f;
  --bg: #1e2737;
  --surface: #151c29;
  --surface-2: #222c3e;
  --line: #2a3549;
  --text: #e8ecf3;
  --text-2: #b9c2d2;
  --muted: #8a95aa;
  --navy: #2a4377;
  --navy-2: #33518e;
  --navy-3: #4467ad;
  --tone: #a8c1ec;
  --blue: #93b4ec;
  --blue-soft: #263a5e;
  --blue-soft-2: #1f2e4a;
  --ok: #4fcf9b;   --ok-soft: rgba(79, 207, 155, .14);
  --warn: #f0b85e; --warn-soft: rgba(240, 184, 94, .14);
  --bad: #f2867d;  --bad-soft: rgba(242, 134, 125, .14);
  --shadow: 0 0 0 1px rgba(255, 255, 255, .045), 0 8px 24px rgba(5, 9, 18, .22);
  --shadow-lift: 0 0 0 1px rgba(255, 255, 255, .08), 0 16px 40px rgba(5, 9, 18, .35);
  --gold: #e9ad48;
  --gold-soft: rgba(233, 173, 72, .15);
  --ink: #cfdcf4;
  --verified: #5aaeff;
  --spot: rgba(147, 180, 236, .08);
  --link-hover: #bcd0f3;
  --hero-1: #36558f;
  --hero-2: #223a66;
  --hero-3: #14223f;
  --hover: #2a364c;
  --divider: rgba(255, 255, 255, .08);
  --glass: rgba(21, 28, 41, .88);
  --glass-strong: rgba(21, 28, 41, .97);
  --ic-glass: rgba(255, 255, 255, .06);
  --chat-a: #182030;
  --chat-b: #151c29;
  --column: #151c29;
  --ring: #151c29;
  --ambient-a: rgba(110, 150, 225, .16);
  --ambient-b: rgba(233, 173, 72, .06);
  color-scheme: dark;
}