/*
  Solas looks. Each person chooses one in Settings.

  To fine-tune a look, change the colour codes below and save. Each line says
  what the colour is used for. Linen and Turf fire each have a light version and
  a darker one for phones in dark mode; Hearth at dusk is always the evening look.
*/

@font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces-soft.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/fonts/nunito.woff2') format('woff2'); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: 'Young Serif'; src: url('/fonts/young-serif.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans.woff2') format('woff2'); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: 'DM Serif Display'; src: url('/fonts/dm-serif-display.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('/fonts/outfit.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('/fonts/caveat.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

/* ---- B. Linen and sea glass (the default) ------------------------------ */
:root,
:root[data-look='linen'] {
  --bg: #faf6ef;            /* page background */
  --surface: #ffffff;       /* cards */
  --surface-2: #f1ece2;     /* soft panels, empty bricks */
  --text: #2f3a36;          /* main text */
  --muted: #6e7a75;         /* secondary text */
  --line: #e4ddd0;          /* borders and dividers */
  --primary: #5b7f5a;       /* buttons, links, progress */
  --primary-ink: #ffffff;   /* text on buttons */
  --primary-soft: #e4ede1;  /* chosen answers, "try this" panel */
  --gold: #e9b949;          /* lamplight: lanterns, coins, progress glow */
  --flame: #d8891c;         /* the flame on cocaine-free calendar days */
  --lit-day: #f7e7bf;       /* a cocaine-free calendar day */
  --clean: #5b7f5a;         /* cocaine-free days */
  --clean-soft: #e1ecdc;
  --recovery: #6f8f8a;      /* recovery days */
  --recovery-soft: #dde9e6;
  --use: #2f3a36;           /* use days (outlined, never red) */
  --use-soft: #eee9e0;
  --amber: #b5652a;         /* "at stake" text */
  --amber-bg: #f9ead9;      /* "at stake" background */
  --amber-line: #efcfaa;
  --brick: #c9906a;         /* a clean month's brick */
  --danger: #a3473a;
  --serif: 'Young Serif', Georgia, serif;
  --sans: 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --hand: var(--serif);
  --radius: 22px;
  --shadow: 0 1px 2px rgba(47, 58, 54, 0.05), 0 6px 20px rgba(47, 58, 54, 0.05);
  --scene-dim: none;
  color-scheme: light;
}

/* ---- A. Hearth at dusk --------------------------------------------------- */
:root[data-look='hearth'] {
  --bg: #1e2330;
  --surface: #2a3142;
  --surface-2: #323a4e;
  --text: #f3ebdd;
  --muted: #b9b2a6;
  --line: #3c4559;
  --primary: #f2c45a;
  --primary-ink: #1e2330;
  --primary-soft: #3a3a3a;
  --gold: #f2c45a;
  --flame: #ffd36b;
  --lit-day: #5b4c2a;
  --clean: #f2c45a;
  --clean-soft: #4a4636;
  --recovery: #9fb0c4;
  --recovery-soft: #34405a;
  --use: #f3ebdd;
  --use-soft: #2f3546;
  --amber: #e7a15a;
  --amber-bg: #3b3029;
  --amber-line: #5d4634;
  --brick: #c9906a;
  --danger: #f0a090;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Nunito', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --hand: var(--serif);
  --radius: 18px;
  --shadow: none;
  --scene-dim: brightness(0.7) saturate(0.85);
  color-scheme: dark;
}

/* ---- C. Turf fire and clay ----------------------------------------------- */
:root[data-look='clay'] {
  --bg: #f1e6d6;
  --surface: #fbf5ec;
  --surface-2: #ecdfcc;
  --text: #3b2a22;
  --muted: #7a6555;
  --line: #e2d2bd;
  --primary: #c2643a;
  --primary-ink: #fff7ee;
  --primary-soft: #f6e0d0;
  --gold: #e8b84a;
  --flame: #c96a1c;
  --lit-day: #f6dfb0;
  --clean: #8a9a55;
  --clean-soft: #e6e6cc;
  --recovery: #9a8470;
  --recovery-soft: #ece2d6;
  --use: #3b2a22;
  --use-soft: #ece2d6;
  --amber: #b4532a;
  --amber-bg: #f6dcc6;
  --amber-line: #eabf9c;
  --brick: #c2643a;
  --danger: #9b3a26;
  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'Outfit', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --hand: 'Caveat', cursive;
  --radius: 28px;
  --shadow: 0 1px 2px rgba(59, 42, 34, 0.06), 0 6px 20px rgba(59, 42, 34, 0.06);
  --scene-dim: none;
  color-scheme: light;
}

/* ---- Dark mode versions of Linen and Turf fire ---------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-look]),
  :root[data-look='linen'] {
    --bg: #1b2321;
    --surface: #242e2b;
    --surface-2: #2c3834;
    --text: #edf0ea;
    --muted: #a9b5af;
    --line: #36443f;
    --primary: #9cc29a;
    --primary-ink: #1b2321;
    --flame: #ffd36b;
    --lit-day: #5b4c2a;
    --primary-soft: #2d3d33;
    --clean: #9cc29a;
    --clean-soft: #2c3d31;
    --recovery: #9cbcb7;
    --recovery-soft: #2b3b3a;
    --use: #edf0ea;
    --use-soft: #303634;
    --amber: #eba06a;
    --amber-bg: #3a2c24;
    --amber-line: #5c4232;
    --shadow: none;
    --scene-dim: brightness(0.7) saturate(0.85);
    color-scheme: dark;
  }
  :root[data-look='clay'] {
    --bg: #241a15;
    --surface: #30241d;
    --surface-2: #3a2c24;
    --text: #f4e8da;
    --muted: #c2ab98;
    --line: #4a372c;
    --primary: #e58a5c;
    --primary-ink: #241a15;
    --flame: #ffc86b;
    --lit-day: #4f3b26;
    --primary-soft: #4a3226;
    --clean: #b8c27c;
    --clean-soft: #3a3b26;
    --recovery: #c2ab98;
    --recovery-soft: #3e3129;
    --use: #f4e8da;
    --use-soft: #3a2c24;
    --amber: #f0a070;
    --amber-bg: #43291d;
    --amber-line: #6a412b;
    --shadow: none;
    --scene-dim: brightness(0.72) saturate(0.85);
    color-scheme: dark;
  }
}