/* Every colour is written once as light-dark(): the sheet paints the right scheme
   on the first frame, before any script runs. data-color-scheme (7.5) overrides
   the system preference; without it the browser's own preference decides. */
:root {
  color-scheme: light dark;
  /* === COLORS === */

  /* Accent */
  --color-accent: #fb923c;
  --color-accent-hover: light-dark(#f97316, #fca75f);
  --color-accent-active: light-dark(#ea580c, #fdbc82);
  --color-accent-subtle: light-dark(rgba(251, 146, 60, 0.08), rgba(251, 146, 60, 0.14));
  --color-accent-selection: light-dark(rgba(251, 146, 60, 0.22), rgba(251, 146, 60, 0.30));
  --color-accent-text: #ffffff;

  /* Surfaces */
  --color-canvas: light-dark(#fffefb, #1a1613);
  --color-canvas-soft: light-dark(#f8f4f0, #221d19);
  --color-surface-hover: light-dark(#f3efe9, #2b241f);
  --color-surface-active: light-dark(#ebe7e0, #352d27);

  /* Text */
  --color-ink: light-dark(#201515, #f6f1ea);
  --color-body: light-dark(#605d52, #c8c1b6);
  --color-body-mid: light-dark(#939084, #948d81);
  --color-mute: light-dark(#c5c0b1, #6a6358);

  /* Semantic */
  --color-danger: light-dark(#e03131, #ff6b6b);
  --color-danger-hover: light-dark(#c92a2a, #ff5252);
  --color-danger-subtle: light-dark(rgba(224, 49, 49, 0.08), rgba(255, 107, 107, 0.14));
  --color-success: light-dark(#2f9e44, #51cf66);
  --color-success-subtle: light-dark(rgba(47, 158, 68, 0.08), rgba(81, 207, 102, 0.14));
  --color-warning: light-dark(#e8590c, #ffa94d);
  --color-warning-subtle: light-dark(rgba(232, 89, 12, 0.08), rgba(255, 169, 77, 0.14));

  /* Highlight: the marker tone behind a highlighted passage in a book. Yellow, so it
     is never mistaken for the orange text selection that can lie over it. */
  --color-highlight: light-dark(rgba(250, 204, 21, 0.38), rgba(250, 204, 21, 0.26));

  /* Border */
  --color-border: light-dark(#e8e3db, #322b25);
  --color-border-strong: light-dark(#d0cabe, #473f37);

  /* Scrim: dims the stage a drawer overlays, darkening in both schemes. */
  --color-scrim: light-dark(rgba(32, 21, 21, 0.32), rgba(0, 0, 0, 0.5));

  /* === TYPOGRAPHY === */

  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* code in a book (book-reader) */

  /* App scale */
  --text-heading: 1.5rem;      /* 24px — page titles; a note's Title line (note-editor) */
  --text-subtitle: 1.25rem;    /* 20px — section headings, card titles */
  --text-body: 1rem;           /* 16px — default app text, chat messages */
  --text-sm: 0.875rem;         /* 14px — secondary UI text, labels */
  --text-caption: 0.8125rem;   /* 13px — timestamps, metadata */

  /* Line height */
  --leading-tight: 1.2;    /* headings, titles */
  --leading-normal: 1.5;   /* body text */

  /* Weight */
  --weight-normal: 400;
  --weight-semibold: 600;

  /* === SPACING === */

  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;

  /* === RADII === */

  --radius-0: 0;
  --radius-sm: 6px;     /* pills, form inputs */
  --radius-md: 12px;    /* buttons, cards */
  --radius-full: 9999px; /* status dots, badges, avatars */

  /* === SHADOWS === */
  /* Shadows read as black on dark; deeper alphas so a raised sheet still lifts. */

  --shadow-card: 0 1px 3px light-dark(rgba(32, 21, 21, 0.06), rgba(0, 0, 0, 0.35));

  /* === TRANSITIONS === */

  --duration-fast: 100ms;
  --duration-slide: 300ms;
  --duration-undo: 3s;    /* the window a deleted note can be brought back */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* === VIEWPORT === */
  /* The phone preview (7.5, base.css): an iPhone 14–16 logical screen. */
  --viewport-phone: 390px;
  --viewport-phone-tall: 844px;

  /* === APP SHELL === */

  --border-width: 1px;
  --width-form: 560px; /* the column a form sits in (settings-sheet) */
  /* A canvas gap, then solid accent: visible on any surface in both themes. */
  --focus-ring: 0 0 0 1px var(--color-canvas), 0 0 0 2px var(--color-accent);
}

/* === SCHEME OVERRIDE === */

:root[data-color-scheme="light"] {
  color-scheme: light;
}

:root[data-color-scheme="dark"] {
  color-scheme: dark;
}