/* Ospito design tokens, "Warm Boutique". Shared by the app, the website and every internal page.
   Load this first, then components.css (app) or site/ospito-site.css (website).

   RULES
   - Never hard-code a colour, radius or font in a screen: use these variables.
   - Light is the default for everybody, whatever the device is set to (Sam's decision).
     Dark is chosen with the pull-cord lamp and remembered in localStorage "ospito_theme".
     The theme is the attribute  html[data-theme="light|dark"]  (set before first paint by theme-init.js).
   - Text colours: --ink (body), --ink-2 (secondary), --ink-3 (small hints, times). All pass 4.5:1 on
     --bg, --surface, --sage and --sand (light) and on every panel (dark). --ink-3 is NOT for text on --clay in light mode.
   - Panels: --surface (paper) for cards, --sage (soft green), --clay (soft terracotta, for "needs you"),
     --sand (neutral warm), --deep (dark green banner, always uses --deep-ink text).
   - Homie green (--hg) is ONLY for Homie's own replies and Homie chips.
*/

/* ------------------------------------------------------------------ fonts (self-hosted, no third-party requests) */
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("./fonts/fraunces-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("./fonts/fraunces-latin-ext-opsz-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("./fonts/fraunces-latin-opsz-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("./fonts/fraunces-latin-ext-opsz-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("./fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("./fonts/hanken-grotesk-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ light (default) */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Core names used by every existing screen: keep them. */
  --bg: #F4EFE6;          /* warm page */
  --surface: #FBF8F2;     /* paper: cards, inputs, sheets */
  --surface-2: #EAE1D0;   /* sand: subtle panels, chips, wells */
  --ink: #1F2620;         /* primary text */
  --ink-2: #4F5750;       /* secondary text */
  --ink-3: #5E675F;       /* hints, times, labels */
  --line: #D9D1C1;        /* hairlines and borders */
  --accent: #1F4D3A;      /* Ospito green: buttons, links, focus */
  --accent-ink: #FFFFFF;  /* text on --accent */
  --accent-soft: #DDE7D6; /* selected rows, soft emphasis (= sage) */
  --good: #2A6B43;
  --warn: #8A5A12;
  --bad: #9C4029;
  --good-soft: #DCE9DA;
  --warn-soft: #F2E4C6;
  --bad-soft: #F0DACB;
  --bad-ink: #FFFFFF;     /* text on a solid --bad button */

  /* Boutique panels and extras */
  --paper: #FBF8F2;
  --sage: #DDE7D6;
  --clay: #F0DACB;
  --sand: #EAE1D0;
  --terra: #A8482F;       /* small dots, "needs you" accents, icons */
  --brass: #8A6B2F;
  --photo: #E3D8C6;       /* photo placeholder */
  --photo-ink: #5A4F3D;
  --cord: #8E3B33;
  --glass: rgba(31, 38, 32, 0.14);
  --deep: #1F4D3A;        /* dark green banner / footer / CTA */
  --deep-ink: #F4EFE6;
  --deep-ink-2: rgba(244, 239, 230, 0.78);
  --deep-line: rgba(244, 239, 230, 0.22);
  --hg: #2E7D4F;          /* Homie green: Homie replies and chips only */
  --hg-ink: #FFFFFF;
  --homie-tile: #EADFC9;  /* tile behind Homie art, same in both themes */
  --scrim: rgba(20, 24, 20, 0.5);

  /* Shape */
  --radius: 22px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --radius-btn: 10px;
  --shadow: none;
  --shadow-pop: 0 14px 36px rgba(31, 38, 32, 0.16);

  /* Space, type, layout */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --font: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --text-xs: 12px; --text-sm: 14px; --text: 16px; --text-lg: 20px; --text-xl: 28px; --text-big: 44px;
  --tap: 44px;            /* minimum touch target */
  --max-w: 1080px;

}

/* ------------------------------------------------------------------ dark (only when the lamp is out) */
:root[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #161411;
  --surface: #1D1915;
  --surface-2: #2A241D;
  --ink: #F1EADF;
  --ink-2: #C4BAAB;
  --ink-3: #9F9585;
  --line: #332C24;
  --accent: #8CC7A3;
  --accent-ink: #10201A;
  --accent-soft: #1E2B23;
  --good: #7FBF98;
  --warn: #D9B15C;
  --bad: #E88F73;
  --good-soft: #1E2B23;
  --warn-soft: #352C18;
  --bad-soft: #3B2A22;
  --bad-ink: #1D1915;

  --paper: #1D1915;
  --sage: #1E2B23;
  --clay: #3B2A22;
  --sand: #2A241D;
  --terra: #E88F73;
  --brass: #C9A25A;
  --photo: #2A241D;
  --photo-ink: #B5A994;
  --cord: #D9806E;
  --glass: transparent;
  --deep: #1E2B23;
  --deep-ink: #F1EADF;
  --deep-ink-2: rgba(241, 234, 223, 0.74);
  --deep-line: rgba(241, 234, 223, 0.18);
  --hg: #7FBF98;
  --hg-ink: #10201A;
  --scrim: rgba(0, 0, 0, 0.62);
  --shadow-pop: 0 14px 36px rgba(0, 0, 0, 0.5);
}

/* ------------------------------------------------------------------ derived values and canvas spellings
   Declared for the root AND for any element with data-theme, so they follow the colours of the nearest theme
   (a swatch or a Homie pose can be shown "on dark" inside a light page, or the other way round). */
:root,
[data-theme="light"],
[data-theme="dark"] {
  --field-line: color-mix(in srgb, var(--ink-3) 65%, var(--line)); /* input borders: 3:1 against the page */

  /* Same colours under the names the design canvas used (so canvas CSS can be copied). Prefer the hyphen names above. */
  --ink2: var(--ink-2); --ink3: var(--ink-3); --accentInk: var(--accent-ink);
  --homieTile: var(--homie-tile); --photoInk: var(--photo-ink);
  --deepInk: var(--deep-ink); --deepInk2: var(--deep-ink-2); --deepLine: var(--deep-line); --hgInk: var(--hg-ink);
}

/* An element with its own data-theme (not the page root) paints itself with that theme's page colours. */
[data-theme="light"]:not(:root),
[data-theme="dark"]:not(:root) { background: var(--bg); color: var(--ink); }