/* ==========================================================================
   Fare Drop — Ice theme v1.0 (Nov 3, 2026)
   Same tokens as iceOS "Matte Paper" (ice-brand/tokens/ice-tokens.paper.json v0.3).
   Owner: iceOS Art Director. Dark is the default; paper (light) via the OS setting
   or <html data-theme="light|dark">. Higher contrast via prefers-contrast: more.
   CSP-safe: no outside requests; fonts load from /fonts/ (same origin).
   Load this file AFTER /styles.css so the legacy aliases at the bottom win.
   ========================================================================== */

/* ---------- Fonts (SIL OFL 1.1, see /fonts/OFL.txt and /fonts/Syne-OFL.txt; no Reserved Font Name) ---------- */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-Variable-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-017F, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("/fonts/AtkinsonHyperlegibleMono-Variable-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-017F, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Syne";
  src: url("/fonts/syne-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  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;
}
/* Full-coverage files (all scripts) are in /fonts/*-Variable.woff2 if you ever need them. */

/* ---------- Theme-independent tokens ---------- */
:root {
  /* Type */
  --ice-font-ui: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", system-ui, sans-serif, "Apple Color Emoji", "Noto Color Emoji";
  --ice-font-mono: "Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ice-fs-caption: 15px;   /* the floor: nothing smaller */
  --ice-fs-small: 16px;
  --ice-fs-body: 18px;      /* base */
  --ice-fs-lead: 21px;
  --ice-fs-title: 26px;
  --ice-fs-headline: 32px;
  --ice-fs-display: 40px;   /* the big price */
  --ice-lh-caption: 1.4;
  --ice-lh-small: 1.45;
  --ice-lh-body: 1.5;
  --ice-lh-lead: 1.45;
  --ice-lh-title: 1.25;
  --ice-lh-headline: 1.2;
  --ice-lh-display: 1.15;
  --ice-fw-regular: 400;    /* no weight under 400 */
  --ice-fw-medium: 500;
  --ice-fw-semibold: 600;
  --ice-fw-bold: 700;
  --ice-tracking-body: 0.01em;
  --ice-measure: 60ch;

  /* Space (4 px grid) */
  --ice-space-1: 4px;
  --ice-space-2: 8px;
  --ice-space-3: 12px;
  --ice-space-4: 16px;
  --ice-space-5: 24px;
  --ice-space-6: 32px;
  --ice-space-7: 48px;

  /* Radius */
  --ice-radius-control: 10px;
  --ice-radius-card: 16px;
  --ice-radius-pill: 999px;

  /* Targets and focus */
  --ice-target-min: 44px;
  --ice-target: 48px;
  --ice-focus-width: 3px;
  --ice-focus-offset: 2px;

  /* Lines */
  --ice-hairline: 1px;
  --ice-control-border: 1.5px;
  --ice-icon-stroke: 2px;   /* 24 px icons; 1.5px allowed at 32 px and up */

  /* Motion (honest motion: only to show a real change) */
  --ice-dur-press: 120ms;
  --ice-dur-fast: 180ms;
  --ice-dur-base: 260ms;
  --ice-dur-slow: 400ms;
  --ice-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ice-ease-enter: cubic-bezier(0, 0, 0, 1);
  --ice-ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --ice-max-translate: 8px;
}

/* ---------- Dark (default): matte black "lead" ---------- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --ice-bg: #101113;              /* page; not #000 (halation) */
  --ice-surface: #191B1E;         /* cards */
  --ice-surface-raised: #23262A;  /* inputs, menus, stat tiles */
  --ice-surface-sunken: #0B0C0D;  /* wells, code */
  --ice-border-subtle: #3B4148;   /* decorative hairlines only */
  --ice-border-strong: #6B747E;   /* control outlines (>= 3:1) */
  --ice-text: #DDE2E6;            /* matte ink: 14.5:1, under APCA dark max */
  --ice-text-secondary: #BCC3CA;
  --ice-text-muted: #9AA4AE;      /* hints, struck old price */
  --ice-accent: #7CC4F2;          /* icy blue: links, savings line, spark dot */
  --ice-accent-strong: #A6D8FF;   /* hover / pressed */
  --ice-accent-fill: #7CC4F2;     /* primary button */
  --ice-on-accent: #0B1620;
  --ice-accent-tint: #27333C;     /* selected row, drop banner */
  --ice-success: #5CD3A6;         /* "Credit confirmed" + check icon only */
  --ice-success-fill: #5CD3A6;
  --ice-on-success: #06261B;
  --ice-success-tint: #223531;
  /* D5 caution/danger: copied byte-for-byte from iceOS (Security-signed). Do not edit. */
  --ice-caution: #F2B544;
  --ice-caution-fill: #F2B544;
  --ice-on-caution: #2A1C00;
  --ice-caution-tint: #373123;
  --ice-danger: #FF8F66;
  --ice-danger-fill: #FF8F66;
  --ice-on-danger: #2B0E02;
  --ice-danger-tint: #392B28;
  /* end D5 */
  --ice-plum: #C9A6E8;            /* upgrade label; 7.3:1 on raised card */
  --ice-focus-ring: #CDEBFF;
  --ice-shadow-card: none;        /* dark is flat: no shadows */
  --ice-shadow-overlay: 0 0 0 1px var(--ice-border-strong);
  --ice-scrim: rgba(0, 0, 0, 0.55);
  --ice-tracking: 0.02em;         /* dark only: offsets irradiation */
}

/* ---------- Paper (light) ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --ice-bg: #F5F1E4;
    --ice-surface: #FBF8EE;
    --ice-surface-raised: #EEEADD;
    --ice-surface-sunken: #E8E3D4;
    --ice-border-subtle: #D9D3C4;
    --ice-border-strong: #716B60;
    --ice-text: #22201C;
    --ice-text-secondary: #45413B;
    --ice-text-muted: #55514A;
    --ice-accent: #245876;
    --ice-accent-strong: #1B4760;
    --ice-accent-fill: #245876;
    --ice-on-accent: #FFFFFF;
    --ice-accent-tint: #E5EAE6;
    --ice-success: #0A6B4C;
    --ice-success-fill: #0A6B4C;
    --ice-on-success: #FFFFFF;
    --ice-success-tint: #E3EBE1;
    --ice-caution: #7A4900;
    --ice-caution-fill: #F5C710;
    --ice-on-caution: #1F1600;
    --ice-caution-tint: #FEF8E2;
    --ice-danger: #A8380A;
    --ice-danger-fill: #A8380A;
    --ice-on-danger: #FFFFFF;
    --ice-danger-tint: #FAECE0;
    --ice-plum: #683C9E;            /* paper violet; 6.3:1 on raised card */
    --ice-focus-ring: #1F4F6E;
    --ice-shadow-card: 0 1px 0 rgba(60, 50, 30, 0.10);  /* one static under-line */
    --ice-shadow-overlay: 0 1px 0 rgba(60, 50, 30, 0.10), 0 0 0 1px var(--ice-border-strong);
    --ice-scrim: rgba(34, 32, 28, 0.40);
    --ice-tracking: 0.01em;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --ice-bg: #F5F1E4;
  --ice-surface: #FBF8EE;
  --ice-surface-raised: #EEEADD;
  --ice-surface-sunken: #E8E3D4;
  --ice-border-subtle: #D9D3C4;
  --ice-border-strong: #716B60;
  --ice-text: #22201C;
  --ice-text-secondary: #45413B;
  --ice-text-muted: #55514A;
  --ice-accent: #245876;
  --ice-accent-strong: #1B4760;
  --ice-accent-fill: #245876;
  --ice-on-accent: #FFFFFF;
  --ice-accent-tint: #E5EAE6;
  --ice-success: #0A6B4C;
  --ice-success-fill: #0A6B4C;
  --ice-on-success: #FFFFFF;
  --ice-success-tint: #E3EBE1;
  --ice-caution: #7A4900;
  --ice-caution-fill: #F5C710;
  --ice-on-caution: #1F1600;
  --ice-caution-tint: #FEF8E2;
  --ice-danger: #A8380A;
  --ice-danger-fill: #A8380A;
  --ice-on-danger: #FFFFFF;
  --ice-danger-tint: #FAECE0;
  --ice-plum: #683C9E;
  --ice-focus-ring: #1F4F6E;
  --ice-shadow-card: 0 1px 0 rgba(60, 50, 30, 0.10);
  --ice-shadow-overlay: 0 1px 0 rgba(60, 50, 30, 0.10), 0 0 0 1px var(--ice-border-strong);
  --ice-scrim: rgba(34, 32, 28, 0.40);
  --ice-tracking: 0.01em;
}

/* ---------- More contrast (OS setting) ---------- */
@media (prefers-contrast: more) {
  :root,
  :root[data-theme="dark"] {
    --ice-text: #F7F9FA;
    --ice-text-secondary: #E1E6EA;
    --ice-text-muted: #C3CAD1;
    --ice-border-subtle: #6B747E;
    --ice-border-strong: #AEB7C0;
    --ice-accent: #A6D8FF;
    --ice-accent-fill: #A6D8FF;
  }
  :root[data-theme="light"] {
    --ice-bg: #FAF8F2;
    --ice-text: #000000;
    --ice-text-secondary: #23272C;
    --ice-text-muted: #3A4048;
    --ice-border-subtle: #8A939C;
    --ice-border-strong: #3A4048;
    --ice-accent: #173F57;
    --ice-accent-fill: #173F57;
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ice-bg: #FAF8F2;
    --ice-text: #000000;
    --ice-text-secondary: #23272C;
    --ice-text-muted: #3A4048;
    --ice-border-subtle: #8A939C;
    --ice-border-strong: #3A4048;
    --ice-accent: #173F57;
    --ice-accent-fill: #173F57;
  }
}

/* ---------- Reduced motion: no transforms, short fades only ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ice-dur-press: 0ms;
    --ice-dur-fast: 120ms;
    --ice-dur-base: 150ms;
    --ice-dur-slow: 150ms;
    --ice-max-translate: 0px;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Legacy aliases for the current /styles.css variable names ---------- */
:root {
  --bg: var(--ice-bg);
  --card: var(--ice-surface);
  --text: var(--ice-text);
  --muted: var(--ice-text-muted);
  --line: var(--ice-border-subtle);
  --primary: var(--ice-accent);
  --primary-text: var(--ice-on-accent);
  --good: var(--ice-accent);           /* savings read in the accent, not loud green */
  --good-bg: var(--ice-accent-tint);
  --warn: var(--ice-caution);
  --warn-bg: var(--ice-caution-tint);
  --bad: var(--ice-danger);
  --radius: var(--ice-radius-card);
}