/*
  Design tokens — Etheli's visual language, from the brand kit: ivory, ink, warm taupe.
  Ink is for text and buttons; taupe is too light for either (2.5:1 on ivory), so it
  only marks details.

  Light is the default. Dark follows the system unless the user picks a theme
  (data-theme="light" | "dark" on <html>).
*/

:root {
  /* Palette (brand kit) */
  --ivory: #f7f1eb;         /* page */
  --paper: #fcf9f5;         /* raised surfaces */
  --ink: #241c17;           /* text, logo, buttons */
  --umber: #6a5c52;         /* secondary text (5.7:1 on ivory, 5.0:1 on the tint) */
  --linen-line: #e2d6cb;    /* hairlines */
  --taupe: #b5957e;         /* the accent, for details only */
  --taupe-soft: #ede1d5;    /* tinted panels */

  /* Roles */
  --color-bg: var(--ivory);
  --color-surface: var(--paper);
  --color-ink: var(--ink);
  --color-ink-muted: var(--umber);
  --color-line: var(--linen-line);
  /* "Accent" is what buttons and active things use: ink, as the brand asks. */
  --color-accent: var(--ink);
  --color-accent-ink: var(--ivory);
  --color-accent-soft: var(--taupe-soft);
  --color-taupe: var(--taupe);
  --color-focus: var(--ink);
  --color-danger: #a1352b;

  /* Type */
  /* Bodoni Moda only for the ETHELI wordmark; all other text is Inter (brand decision). */
  --font-serif: "Bodoni Moda", Didot, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Scale: major third (1.25) from a 16px base */
  --text-xs: 0.8rem;     /* 12.8 */
  --text-sm: 0.875rem;   /* 14 */
  --text-md: 1rem;       /* 16 */
  --text-lg: 1.25rem;    /* 20 */
  --text-xl: 1.5625rem;  /* 25 */
  --text-2xl: 1.953rem;  /* 31 */
  --text-3xl: 2.441rem;  /* 39 */

  --leading-tight: 1.15;
  --leading-sans: 1.45;
  --leading-serif: 1.55;

  /* Spacing: 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --gutter: var(--space-4);

  /* Shape: quiet luxury, nearly square. Circles (the Add button, avatars) say 50% themselves. */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 2px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-quick: 160ms;
  --duration-page: 360ms;

  /* Layout */
  --measure: 34rem;
  --tap: 44px;
  --nav-height: 64px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0e0d0c;
    --color-surface: #181715;
    --color-ink: #f4efe8;
    --color-ink-muted: #aaa39b;
    --color-line: #2b2926;
    --color-accent: #f4efe8;
    --color-accent-ink: #0e0d0c;
    --color-accent-soft: #24221f;
    --color-taupe: #b5957e;
    --color-focus: #f4efe8;
    --color-danger: #f0a197;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-bg: #0e0d0c;
  --color-surface: #181715;
  --color-ink: #f4efe8;
  --color-ink-muted: #aaa39b;
  --color-line: #2b2926;
  --color-accent: #f4efe8;
  --color-accent-ink: #0e0d0c;
  --color-accent-soft: #24221f;
  --color-taupe: #b5957e;
  --color-focus: #f4efe8;
  --color-danger: #f0a197;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-quick: 0ms;
    --duration-page: 0ms;
  }
}