/* Twine marketing site: design tokens.
   Copied verbatim from the Twine Design System (design/_ds/.../tokens/*.css), in the
   order styles.css imports them, so the site reads the same values the app ships.
   The only addition is the block at the end, which applies the system's dark palette
   when the visitor's OS asks for it and no data-theme attribute says otherwise. */

/* ═══ tokens/fonts.css ═══ */
/* Archivo is the entire typeface system: 800 for headings and labels, 400 for
   body. The site serves it from assets/fonts, so a visit makes no request to
   anyone else. The two files are the Google Fonts build of Archivo (variable,
   latin and latin-ext), under the SIL Open Font License in assets/fonts/OFL.txt.
   The faces mirror the 400 and 800 pair the design system asks for. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("../assets/fonts/archivo-latin-ext.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: "Archivo"; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("../assets/fonts/archivo-latin.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: "Archivo"; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url("../assets/fonts/archivo-latin-ext.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: "Archivo"; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url("../assets/fonts/archivo-latin.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; }

/* ═══ tokens/colors.css ═══ */
/* Twine colour system. One accent (a near-mono red) on a cool near-white
   ground. Base values first, then the semantic roles every surface reads.
   Dark mode is the same system mirrored: the grounds keep their neutral hue and
   flip the lightness steps, the warm near-black ink flips to a warm off-white,
   and the red stays put for fills while stepping up its ramp wherever it was
   used as type. */
:root {
  /* ── Accent ramp ─────────────────────────────────────────────── */
  --accent: #ec3013;
  --accent-100: #fff2ef;
  --accent-200: #ffe0d9;
  --accent-300: #ffc4b8;
  --accent-400: #ff9783;
  --accent-500: #ff563c;
  --accent-600: #dd2b0f;
  --accent-700: #ae1800;
  --accent-800: #7c1405;
  --accent-900: #4d170e;

  /* ── Neutral ramp (C≈0.005, h≈286°; cool, no red-brown bias) ─ */
  --neutral-100: #f5f5f8;
  --neutral-200: #e7e7eb;
  --neutral-300: #d4d4d7;
  --neutral-400: #b7b7ba;
  --neutral-500: #98989b;
  --neutral-600: #7a7a7d;
  --neutral-700: #5d5d60;
  --neutral-800: #424244;
  --neutral-900: #2b2b2e;

  /* ── Ground and ink (light) ──────────────────────────────────── */
  --bg: #f4f4f5;
  --surface: #e9e9ec;
  --canvas: #e2e2e6;
  --text: #201e1d;

  /* Foreground on an accent fill: white in BOTH themes. Never the ground. */
  --on-accent: #f4f4f5;

  /* ── Accent roles. Fills keep --accent; these are red-as-type. ─ */
  --accent-text: var(--accent); /* Sync now, active tab, Copied status */
  --accent-quiet: var(--accent-700); /* kickers, Disconnect/Delete, alert glyphs */
  --accent-pale: var(--accent-800); /* text on the tinted card, Removed status */
  --accent-pale-strong: var(--accent-800); /* headings on the tinted card */
  --tint: var(--accent-100); /* tinted fill behind banners and overlap cards */

  /* ── Ink opacity ladder: the system's way of writing secondary text ── */
  --ink-85: color-mix(in srgb, var(--text) 85%, transparent);
  --ink-70: color-mix(in srgb, var(--text) 70%, transparent);
  --ink-65: color-mix(in srgb, var(--text) 65%, transparent);
  --ink-60: color-mix(in srgb, var(--text) 60%, transparent);
  --ink-55: color-mix(in srgb, var(--text) 55%, transparent);
  --ink-50: color-mix(in srgb, var(--text) 50%, transparent);
  --ink-45: color-mix(in srgb, var(--text) 45%, transparent);
  --ink-40: color-mix(in srgb, var(--text) 40%, transparent);
  --ink-35: color-mix(in srgb, var(--text) 35%, transparent);
  --ink-08: color-mix(in srgb, var(--text) 8%, transparent); /* press highlight */
  --ink-07: color-mix(in srgb, var(--text) 7%, transparent);

  /* ── Lines ───────────────────────────────────────────────────── */
  --divider: var(--ink-40);

  /* ── Tag, scrim, selection ───────────────────────────────────── */
  --tag-bg: var(--neutral-100);
  --tag-ink: var(--neutral-800);
  --scrim: color-mix(in srgb, var(--neutral-900) 50%, transparent);
  --selection: color-mix(in srgb, var(--accent) 30%, transparent);

  /* ── Semantic aliases ────────────────────────────────────────── */
  --text-primary: var(--text);
  --text-secondary: var(--ink-60);
  --text-muted: var(--ink-50);
  --text-placeholder: var(--ink-40);
  --text-on-fill: var(--bg); /* ink-filled chip / segment labels */
  --surface-page: var(--bg);
  --surface-card: var(--surface);
  --surface-inset: var(--canvas);
  --surface-fill-strong: var(--text); /* the ink-filled band: AND/OR, preview head */
  --border-default: var(--divider);
  --border-strong: var(--text);
  --action-primary-bg: var(--accent);
  --action-primary-fg: var(--on-accent);
  --action-primary-press: var(--accent-700);
  --action-secondary-fg: var(--text);
  --action-ghost-fg: var(--accent-text);
  --state-live: var(--accent-text);
  --state-alert: var(--accent-quiet);
  --state-alert-bg: var(--tint);
  --state-alert-border: var(--accent);
  --state-off-bg: var(--surface);
}

:root[data-theme="dark"] {
  --bg: #18171a;
  --surface: #232226;
  --canvas: #111013;
  --text: #eceae8;

  --accent-text: var(--accent-500);
  --accent-quiet: var(--accent-400);
  --accent-pale: var(--accent-300);
  --accent-pale-strong: var(--accent-200);
  --tint: #311a19; /* 12% accent over the dark ground */

  /* Light ink glows on a dark ground, so rules drop to 35% for equal weight. */
  --divider: var(--ink-35);

  --tag-bg: var(--neutral-900);
  --tag-ink: var(--neutral-300);
  --scrim: color-mix(in srgb, #000 60%, transparent);
}

/* ═══ tokens/typography.css ═══ */
/* Archivo everywhere. Two weights carry the whole system: 800 for anything
   structural (headings, button labels, row titles, status words) and 400 for
   body, notes and chip labels. Headings run tight, with negative tracking scaled to
   the size, line-height 1.12. Kickers are upper-cased in the component, never
   in the copy. */
:root {
  --font-core: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-heading: var(--font-core);
  --font-body: var(--font-core);

  --weight-body: 400;
  --weight-heading: 800;
  --weight-kicker: 400; /* 800 only on the tab bar and status words */

  /* ── Size scale (px, as the app declares them, fractional on purpose) ── */
  --size-display: 34px; /* onboarding step headline */
  --size-title: 30px; /* tab page title */
  --size-page: 26px; /* pushed-page title */
  --size-lead: 22px; /* rule-name field */
  --size-xl: 21px; /* live-preview headline */
  --size-dialog: 20px; /* dialog title */
  --size-row: 18px; /* rule row name */
  --size-card: 17px; /* calendar cell, overlap title */
  --size-tile: 15px; /* account / provider tile title */
  --size-body: 14px; /* body, settings row name, button label */
  --size-body-sm: 13.5px; /* long body copy, calendar row */
  --size-label: 12.5px; /* condition labels, dense body */
  --size-sm: 12px; /* small button label, error text */
  --size-note: 11.5px; /* the "note" size */
  --size-xs: 11px; /* log detail, tile note */
  --size-micro: 10.5px; /* cell subtitle, timestamp */
  --size-kicker: 10px;
  --size-kicker-sm: 9.5px;

  /* ── Line heights ───────────────────────────────────────────── */
  --leading-heading: 1.12;
  --leading-tight: 1.2; /* kickers, button labels */
  --leading-dense: 1.3;
  --leading-body: 1.4;
  --leading-relaxed: 1.45; /* intro paragraphs, notes */
  --leading-loose: 1.5;

  /* ── Tracking ───────────────────────────────────────────────── */
  --tracking-heading: -0.015em; /* headings, scaled by size */
  --tracking-heading-tight: -0.02em; /* page titles at 26px+ */
  --tracking-flat: 0; /* button labels, row titles under 18px */
  --tracking-kicker: 0.12em;
  --tracking-kicker-wide: 0.16em; /* page-header and step kickers */
  --tracking-kicker-tight: 0.06em; /* tab labels, status words */
  --tracking-join: 0.09em; /* the AND / OR band */
}

/* ═══ tokens/spacing.css ═══ */
/* A 4px base with one odd member: the page gutter is 20px, and every screen in
   the design uses it for its left and right edge. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --gutter: 20px; /* horizontal page gutter, every screen */

  /* ── Recurring paddings lifted from the components ──────────── */
  --pad-row: 16px 20px; /* rule row, account section */
  --pad-card: 14px; /* tile, banner, calendar cell */
  --pad-card-tight: 12px; /* condition card, error banner */
  --pad-button: 8px 14.4px; /* primary / secondary button */
  --pad-button-ghost: 8px 4px;
  --pad-chip: 6px 11px;
  --pad-tag: 3px 10px;
  --pad-input: 8px 10px;

  /* ── Control sizes ──────────────────────────────────────────── */
  --switch-w: 44px;
  --switch-h: 26px;
  --switch-knob: 20px;
  --check-size: 18px;
  --mark-size: 34px; /* AccountMark default; 36px in tiles */
  --direction-cell-w: 54px; /* the accent arrow column in the rule builder */
  --tap-min: 44px;
}

/* ═══ tokens/borders.css ═══ */
/* Two line weights and no radius. A 2px rule separates major sections; a 1px
   hairline separates rows inside one. Nothing is rounded anywhere, and nothing
   casts a shadow; separation is done with lines and ground steps only. */
:root {
  --rule: 2px; /* strong rule, between sections */
  --hairline: 1px; /* between rows */
  --border-check: 1.5px; /* checkbox and radio square */

  --radius: 0; /* zero on purpose; do not round a corner */
  --shadow: none; /* the system has no shadow layer */

  --border-hairline: var(--hairline) solid var(--divider);
  --border-rule: var(--rule) solid var(--divider);
  --border-ink: var(--rule) solid var(--text); /* the live-preview frame */
  --border-accent: var(--hairline) solid var(--accent);
}

/* ═══ tokens/motion.css ═══ */
/* Motion is nearly absent. There is no splash-ink, no bounce and no scale on
   press: taps are answered by a flat colour highlight. The only two animations
   in the product are the switch knob sliding across and the sync glyph turning
   while a check runs. Page transitions use the platform's own slide. */
:root {
  --dur-control: 120ms; /* @kind other */ /* switch knob, chip fill */
  --dur-spin: 900ms; /* @kind other */ /* one rotation of the sync glyph */
  --ease-control: linear; /* @kind other */ /* no curve was specified, so keep it plain */
  --press-highlight: var(--ink-08); /* secondary / ghost press */
  --press-highlight-accent: var(--accent-700); /* primary press */
  --disabled-opacity: 0.45; /* @kind other */
  --inactive-opacity: 0.6; /* @kind other */ /* an unused calendar row, a paused rule name */
}

/* ═══ tokens/base.css ═══ */
/* Minimal resets so a card or screen picks up the system without ceremony. */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-core);
  font-size: var(--size-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
::selection {
  background: var(--selection);
}
a {
  color: var(--accent-quiet);
  text-decoration: underline;
  text-decoration-color: var(--accent-quiet);
}
a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* ═══ site addition: follow the OS colour scheme ═══
   Same values as :root[data-theme="dark"] above. An explicit data-theme="light" on <html> wins. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #18171a;
    --surface: #232226;
    --canvas: #111013;
    --text: #eceae8;
  
    --accent-text: var(--accent-500);
    --accent-quiet: var(--accent-400);
    --accent-pale: var(--accent-300);
    --accent-pale-strong: var(--accent-200);
    --tint: #311a19; /* 12% accent over the dark ground */
  
    /* Light ink glows on a dark ground, so rules drop to 35% for equal weight. */
    --divider: var(--ink-35);
  
    --tag-bg: var(--neutral-900);
    --tag-ink: var(--neutral-300);
    --scrim: color-mix(in srgb, #000 60%, transparent);
  }
}