/*
  Central design tokens — Notion-style: neutral, flat, lots of whitespace.
  Light + automatic dark mode. Rule 5: screens consume these variables only.
*/
:root {
  color-scheme: light dark;

  /* --- Accent: monochrome. Ink, not colour — links/active states are ink + underline. --- */
  --color-primary: #37352f;
  --color-primary-strong: #2f2d28;
  --color-primary-soft: rgba(55, 53, 47, 0.12);
  --color-on-primary: #ffffff;

  /* --- Primary button: Notion's ink/black fill (blue is for links/accents only) --- */
  --color-btn: #37352f;
  --color-btn-hover: #4f4b44;
  --color-on-btn: #ffffff;

  /* --- Surfaces & text (Notion warm neutrals) --- */
  --color-bg-app: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: rgba(55, 53, 47, 0.06);     /* fill / input bg */
  --color-sidebar: #f7f6f3;
  --color-hover: rgba(55, 53, 47, 0.06);
  --color-text: #37352f;                            /* Notion's signature ink */
  --color-text-muted: rgba(55, 53, 47, 0.65);
  --color-text-faint: rgba(55, 53, 47, 0.4);
  --color-border: rgba(55, 53, 47, 0.1);

  /* --- Bars: solid (no frosted blur) --- */
  --color-bar: #ffffff;
  --color-bar-border: rgba(55, 53, 47, 0.09);
  --blur: none;

  /* --- Semantic: monochrome. Meaning comes from the label, not the colour. --- */
  --color-success: #787774;
  --color-success-soft: var(--color-surface-alt);
  --color-warning: #787774;
  --color-warning-soft: var(--color-surface-alt);
  --color-danger: #787774;
  --color-danger-soft: var(--color-surface-alt);
  --color-info: #787774;
  --color-info-soft: var(--color-surface-alt);

  --color-priority-high: #787774;
  --color-priority-medium: #787774;
  --color-priority-low: #787774;

  /* Area colours intentionally removed — the design is monochrome. Each Area still
     stores a colour in the DB, but it is no longer rendered (chips/dots are neutral). */

  /* --- Spacing --- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;

  /* --- Radius (Notion is tight) --- */
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 999px;

  /* --- Shadows: flat. Borders + whitespace only (Notion). --- */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-fab: none;
  --shadow-up: 0 -1px 0 var(--color-bar-border);

  /* --- Typography (system sans, like Notion) --- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto,
    "Helvetica Neue", "Apple Color Emoji", Arial, sans-serif;
  --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 19px;
  --text-xl: 24px; --text-2xl: 30px; --text-3xl: 40px;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;

  /* --- Layout --- */
  --tabbar-height: 52px;
  --askbar-height: 54px;
  --sidebar-width: 248px;
  --content-max-width: 900px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

/* Dark palette. Applied automatically when the OS prefers dark AND the user hasn't
   forced a theme via the toggle; the identical :root[data-theme="dark"] block below
   handles the manual choice. KEEP THE TWO BLOCKS IN SYNC. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-primary: rgba(255, 255, 255, 0.81);
    --color-primary-strong: #ffffff;
    --color-primary-soft: rgba(255, 255, 255, 0.16);
    --color-on-primary: #191919;

    /* Dark-mode primary button: near-white fill with dark text (Notion dark) */
    --color-btn: rgba(255, 255, 255, 0.9);
    --color-btn-hover: #ffffff;
    --color-on-btn: #191919;

    --color-bg-app: #191919;
    --color-surface: #202020;
    --color-surface-alt: rgba(255, 255, 255, 0.055);
    --color-sidebar: #202020;
    --color-hover: rgba(255, 255, 255, 0.055);
    --color-text: rgba(255, 255, 255, 0.81);
    --color-text-muted: rgba(255, 255, 255, 0.46);
    --color-text-faint: rgba(255, 255, 255, 0.28);
    --color-border: rgba(255, 255, 255, 0.094);

    --color-bar: #191919;
    --color-bar-border: rgba(255, 255, 255, 0.094);

    --color-success: #9b9a97;
    --color-success-soft: var(--color-surface-alt);
    --color-warning: #9b9a97;
    --color-warning-soft: var(--color-surface-alt);
    --color-danger: #9b9a97;
    --color-danger-soft: var(--color-surface-alt);
    --color-info: #9b9a97;
    --color-info-soft: var(--color-surface-alt);

    --color-priority-high: #9b9a97;
    --color-priority-medium: #9b9a97;
    --color-priority-low: #9b9a97;

    --shadow-md: none;
    --shadow-fab: none;
  }
}

/* Manual dark (user forced it via the theme toggle). Mirror of the block above. */
:root[data-theme="dark"] {
  --color-primary: rgba(255, 255, 255, 0.81);
  --color-primary-strong: #ffffff;
  --color-primary-soft: rgba(255, 255, 255, 0.16);
  --color-on-primary: #191919;

  --color-btn: rgba(255, 255, 255, 0.9);
  --color-btn-hover: #ffffff;
  --color-on-btn: #191919;

  --color-bg-app: #191919;
  --color-surface: #202020;
  --color-surface-alt: rgba(255, 255, 255, 0.055);
  --color-sidebar: #202020;
  --color-hover: rgba(255, 255, 255, 0.055);
  --color-text: rgba(255, 255, 255, 0.81);
  --color-text-muted: rgba(255, 255, 255, 0.46);
  --color-text-faint: rgba(255, 255, 255, 0.28);
  --color-border: rgba(255, 255, 255, 0.094);

  --color-bar: #191919;
  --color-bar-border: rgba(255, 255, 255, 0.094);

  --color-success: #9b9a97;
  --color-success-soft: var(--color-surface-alt);
  --color-warning: #9b9a97;
  --color-warning-soft: var(--color-surface-alt);
  --color-danger: #9b9a97;
  --color-danger-soft: var(--color-surface-alt);
  --color-info: #9b9a97;
  --color-info-soft: var(--color-surface-alt);

  --color-priority-high: #9b9a97;
  --color-priority-medium: #9b9a97;
  --color-priority-low: #9b9a97;

  --shadow-md: none;
  --shadow-fab: none;
}