/* ==========================================================================
   Personal OS V2 — design tokens
   Loaded BEFORE style.css. This file is the single source of truth for
   colour, type, spacing, radius and elevation.

   The legacy variable names (--bg, --card-bg, --text, --border, ...) are
   kept as aliases on purpose: ~600 legacy rules reference them, so
   re-pointing the aliases re-themes the whole app coherently instead of
   piling page-by-page overrides on top of it.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* --- Type scale ------------------------------------------------------ */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.55;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Spacing rhythm --------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* --- Radius ----------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-full: 999px;

  /* --- Layout ----------------------------------------------------------- */
  --content-max: 46rem;
  --content-max-wide: 68rem;
  --rail-width: 84px;
  --rail-width-expanded: 240px;
  --tabbar-height: 62px;
  --tap-min: 44px;

  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.8, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
}

/* ==========================================================================
   Light theme — calm, warm, premium. This is the default.
   ========================================================================== */
:root,
[data-theme="light"] {
  --surface-page: #faf8f5;
  --surface: #ffffff;
  --surface-2: #f3f0ea;
  --surface-3: #ebe7df;
  --surface-inverse: #211f1c;

  --ink: #1c1a17;
  --ink-2: #5f5a52;
  --ink-3: #8b8478;
  --ink-inverse: #faf8f5;

  --line: #e8e3da;
  --line-strong: #d6cfc3;

  /* V2.1: a professional focus blue replaces the indigo. Blue carries
     position, selection and navigation; it is the colour of "where you are",
     never of "do this". A digital adaptation in the spirit of Pantone Classic
     Blue 19-4052, not a physical colour match. */
  --accent: #4f70ae;
  --accent-strong: #415f99;
  --accent-soft: #eaeff8;
  --accent-ink: #345286;
  /* Text sitting ON the accent, as opposed to --accent-ink which is accent-
     coloured text on a surface. The dark theme's accent is a light blue,
     so white-on-accent there measures ~2.5:1 — it needs dark ink instead. */
  --on-accent: #ffffff;

  /* Energy — a warm coral for a positive, forward action, used sparingly and
     never for navigation. A digital adaptation in the spirit of Pantone Living
     Coral. On a light surface the pure coral cannot carry text at AA, so the
     ink is the darkened form and the coral itself stays a fill. */
  --energy: #e0604c;
  --energy-soft: #fdeeea;
  --energy-ink: #a63a2a;

  --positive: #0f8a5f;
  --positive-soft: #e7f4ee;
  --positive-ink: #0b6647;

  --caution: #b4690e;
  --caution-soft: #fbf0df;
  --caution-ink: #8a5009;

  --critical: #c0342b;
  --critical-soft: #fbeae8;
  --critical-ink: #96271f;

  --elev-1: 0 1px 2px rgba(28, 26, 23, 0.05);
  --elev-2: 0 4px 14px rgba(28, 26, 23, 0.07);
  --elev-3: 0 18px 44px rgba(28, 26, 23, 0.13);

  --overlay: rgba(28, 26, 23, 0.36);
  --focus-ring: 0 0 0 3px rgba(79, 112, 174, 0.34);
}

/* ==========================================================================
   Dark theme — warm neutral, low contrast fatigue. Not a navy dashboard.
   ========================================================================== */
[data-theme="dark"] {
  --surface-page: #171614;
  --surface: #201e1b;
  --surface-2: #2a2724;
  --surface-3: #353128;
  --surface-inverse: #f3f0ea;

  --ink: #f2efe9;
  --ink-2: #b9b2a7;
  --ink-3: #8c8578;
  --ink-inverse: #201e1b;

  --line: #332f2b;
  --line-strong: #45403a;

  --accent: #7fa3dc;
  --accent-strong: #9bb8e7;
  --accent-soft: rgba(127, 163, 220, 0.16);
  --accent-ink: #aac6ec;
  --on-accent: #121b2b;

  --energy: #ff7566;
  --energy-soft: rgba(255, 117, 102, 0.16);
  --energy-ink: #ff9d90;

  --positive: #4ec394;
  --positive-soft: rgba(78, 195, 148, 0.14);
  --positive-ink: #7fd7b3;

  --caution: #e0a259;
  --caution-soft: rgba(224, 162, 89, 0.14);
  --caution-ink: #eec18d;

  --critical: #e88a80;
  --critical-soft: rgba(232, 138, 128, 0.14);
  --critical-ink: #f0aaa2;

  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --elev-2: 0 4px 14px rgba(0, 0, 0, 0.42);
  --elev-3: 0 18px 44px rgba(0, 0, 0, 0.5);

  --overlay: rgba(0, 0, 0, 0.58);
  --focus-ring: 0 0 0 3px rgba(127, 163, 220, 0.42);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-page: #171614;
    --surface: #201e1b;
    --surface-2: #2a2724;
    --surface-3: #353128;
    --surface-inverse: #f3f0ea;

    --ink: #f2efe9;
    --ink-2: #b9b2a7;
    --ink-3: #8c8578;
    --ink-inverse: #201e1b;

    --line: #332f2b;
    --line-strong: #45403a;

    --accent: #7fa3dc;
    --accent-strong: #9bb8e7;
    --accent-soft: rgba(127, 163, 220, 0.16);
    --accent-ink: #aac6ec;
    --on-accent: #121b2b;

    --energy: #ff7566;
    --energy-soft: rgba(255, 117, 102, 0.16);
    --energy-ink: #ff9d90;

    --positive: #4ec394;
    --positive-soft: rgba(78, 195, 148, 0.14);
    --positive-ink: #7fd7b3;

    --caution: #e0a259;
    --caution-soft: rgba(224, 162, 89, 0.14);
    --caution-ink: #eec18d;

    --critical: #e88a80;
    --critical-soft: rgba(232, 138, 128, 0.14);
    --critical-ink: #f0aaa2;

    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --elev-2: 0 4px 14px rgba(0, 0, 0, 0.42);
    --elev-3: 0 18px 44px rgba(0, 0, 0, 0.5);

    --overlay: rgba(0, 0, 0, 0.58);
    --focus-ring: 0 0 0 3px rgba(127, 163, 220, 0.42);
  }
}

/* ==========================================================================
   Legacy aliases — every pre-V2 rule reads these. Re-pointing them here is
   what makes the whole app follow the V2 palette during staged migration.
   Remove an alias only once no rule references it.
   ========================================================================== */
:root {
  --primary: var(--accent);
  --primary-dark: var(--accent-strong);
  --secondary: var(--accent-ink);
  --success: var(--positive);
  --warning: var(--caution);
  --danger: var(--critical);
  --bg: var(--surface-page);
  --bg-secondary: var(--surface);
  --bg-tertiary: var(--surface-2);
  --text: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --border: var(--line);
  --card-bg: var(--surface);
  --shadow: var(--elev-2);
}

/* ==========================================================================
   Base
   ========================================================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.011em;
  color: var(--ink);
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-base); }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

small {
  font-size: var(--fs-sm);
}

code,
pre,
kbd {
  font-family: var(--font-mono);
}

img,
svg {
  max-width: 100%;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

::selection {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}