/* skipto.page — design tokens (direction 2a)
   Light is the default. Dark follows the OS unless data-theme forces a theme.
   The dark block is written twice on purpose: once for the OS preference,
   once for an explicit data-theme="dark". Keep the two in sync. */

:root {
  color-scheme: light;

  /* neutrals */
  --ground: #FAFAF7;
  --surface: #F1F1EB;
  --surface-2: #E7E7DF;
  --border: #D8D7CD;
  --text: #151612;
  --text-muted: #5C5F56;

  /* accent */
  --accent: #1B7352;
  --accent-pressed: #145A3F;
  --on-accent: #FFFFFF;
  --focus: #151612;

  /* reading statuses */
  --st-want: #5752D1;
  --st-reading: #A35F00;
  --st-read: #1C7A44;
  --st-paused: #5A6472;
  --st-dnf: #B3261E;
  --st-rereading: #0B7580;

  /* feedback */
  --success: #1F7A3A;
  --warning: #8F5A00;
  --error: #B3261E;
  --info: #2B5FB8;

  /* type */
  --font-sans: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", "Noto Sans", sans-serif;
  --font-serif: "Iowan Old Style", Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --text-xs: 0.8125rem;  /* 13 */
  --text-sm: 0.875rem;   /* 14 */
  --text-md: 1rem;       /* 16 */
  --text-lg: 1.0625rem;  /* 17 */
  --text-xl: 1.25rem;    /* 20 */
  --text-2xl: 1.5rem;    /* 24 */
  --text-3xl: 2rem;      /* 32 */
  --text-display: clamp(1.875rem, 1.2rem + 2.6vw, 3rem); /* 30–48 */

  --leading-tight: 1.1;
  --leading-normal: 1.45;
  --leading-body: 1.6;

  /* space (4 px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-18: 4.5rem;

  /* radii */
  --radius-1: 3px;   /* covers */
  --radius-2: 6px;   /* buttons, fields */
  --radius-3: 8px;   /* panels */
  --radius-pill: 999px;

  --measure: 66ch;
  --page-max: 73.75rem; /* 1180 */
  --duration: 150ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #10120F;
    --surface: #181B17;
    --surface-2: #22261F;
    --border: #31362D;
    --text: #EDEFE8;
    --text-muted: #A0A699;
    --accent: #58C795;
    --accent-pressed: #7DD9AE;
    --on-accent: #06170F;
    --focus: #EDEFE8;
    --st-want: #A5A1FF;
    --st-reading: #F0B04A;
    --st-read: #62CC8E;
    --st-paused: #A3ADB9;
    --st-dnf: #F28B82;
    --st-rereading: #5CC9D2;
    --success: #62CC8E;
    --warning: #E8B04B;
    --error: #F28B82;
    --info: #8AB4F8;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #10120F;
  --surface: #181B17;
  --surface-2: #22261F;
  --border: #31362D;
  --text: #EDEFE8;
  --text-muted: #A0A699;
  --accent: #58C795;
  --accent-pressed: #7DD9AE;
  --on-accent: #06170F;
  --focus: #EDEFE8;
  --st-want: #A5A1FF;
  --st-reading: #F0B04A;
  --st-read: #62CC8E;
  --st-paused: #A3ADB9;
  --st-dnf: #F28B82;
  --st-rereading: #5CC9D2;
  --success: #62CC8E;
  --warning: #E8B04B;
  --error: #F28B82;
  --info: #8AB4F8;
}

/* Reader themes — a separate, smaller set, applied on the reader root only. */
.reader[data-reader-theme="light"] { --r-bg: #FFFFFF; --r-text: #1A1A17; --r-muted: #6B6B63; --r-highlight: #FFE58A; }
.reader[data-reader-theme="sepia"] { --r-bg: #F4ECD8; --r-text: #3B2F22; --r-muted: #7A6A55; --r-highlight: #F1CF6E; }
.reader[data-reader-theme="dark"]  { --r-bg: #121310; --r-text: #D9DBD3; --r-muted: #8E9388; --r-highlight: #5B4A12; }