/* ==========================================================================
   Design tokens — Trading Journal
   Every text colour pairs with its surface at a contrast ratio of at least
   7:1 (WCAG 2.2 SC 1.4.6 Contrast Enhanced). Ratios are asserted by the unit
   test in tests/contrast.test.ts, so tokens cannot drift unnoticed.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Surfaces */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-raised: #f4f6f8;
  --color-surface-sunken: #eef1f4;
  --color-border: #c2c9d2;
  --color-border-strong: #8b95a3;

  /* Text */
  --color-text: #101418;
  --color-text-muted: #4a5260;
  --color-text-inverse: #ffffff;

  /* Brand and states — deep emerald accent, used sparingly */
  --color-accent: #04563c;
  --color-accent-hover: #033c2a;
  --color-accent-soft: #e3f2ec;
  --color-focus: #0b3d91;

  --color-profit: #04552f;
  --color-profit-soft: #eaf7f0;
  --color-loss: #990f0f;
  --color-loss-soft: #fdeded;
  --color-warning-text: #6b4400;
  --color-warning-soft: #fdf3e0;
  --color-info-text: #0b3d91;
  --color-info-soft: #e7eefb;

  /*
   * Heatmap scale. Every tile also prints its amount, so colour reinforces
   * the reading rather than carrying it. Each fill is chosen so the single
   * body text colour clears 7:1 on top of it, which is what lets the whole
   * calendar meet the enhanced contrast criterion; depth of tint, not a
   * switch to inverted text, is what separates the three magnitudes.
   */
  --heat-loss-3: #fc8888;
  --heat-loss-2: #fdadad;
  --heat-loss-1: #fecfcf;
  --heat-zero: #e6e9ed;
  --heat-gain-1: #1af991;
  --heat-gain-2: #06dd78;
  --heat-gain-3: #05c36a;

  /* Typography */
  --font-sans: 'Inter', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-scale: 1;
  --line-height-body: 1.6;
  --line-height-heading: 1.25;
  --letter-spacing-body: 0.01em;
  --word-spacing-body: normal;

  --font-size-xs: calc(0.8125rem * var(--text-scale));
  --font-size-sm: calc(0.9375rem * var(--text-scale));
  --font-size-base: calc(1rem * var(--text-scale));
  --font-size-lg: calc(1.125rem * var(--text-scale));
  --font-size-xl: calc(1.375rem * var(--text-scale));
  --font-size-2xl: calc(1.75rem * var(--text-scale));
  --font-size-3xl: calc(2.125rem * var(--text-scale));

  /* Spacing scale */
  --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;

  /* Shape and elevation */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16, 20, 24, 0.08);
  --shadow-md: 0 4px 12px rgba(16, 20, 24, 0.1);

  /* Layout */
  --content-max: 76rem;
  /* Line length capped so prose never exceeds 80 characters (SC 1.4.8) */
  --prose-max: 68ch;
  --min-target: 44px;
  --header-height: 4.25rem;

  /* Motion — overridden to 0 under prefers-reduced-motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --easing: cubic-bezier(0.2, 0, 0.2, 1);
}

/* Dark theme keeps full parity, also at 7:1 or better. */
:root[data-theme='dark'] {
  color-scheme: dark;

  --color-bg: #0d1117;
  --color-surface: #151b23;
  --color-surface-raised: #1c242e;
  --color-surface-sunken: #10161d;
  --color-border: #3a4553;
  --color-border-strong: #6b7787;

  --color-text: #f2f5f8;
  --color-text-muted: #b6c0cc;
  --color-text-inverse: #0d1117;

  --color-accent: #3ddc97;
  --color-accent-hover: #6ae8b3;
  --color-accent-soft: #17392c;
  --color-focus: #8ab4ff;

  --color-profit: #4ade9b;
  --color-profit-soft: #14342a;
  --color-loss: #ffa0a0;
  --color-loss-soft: #331919;
  --color-warning-text: #f5c86b;
  --color-warning-soft: #3a2c12;
  --color-info-text: #a8c7ff;
  --color-info-soft: #16233c;

  --heat-loss-3: #a50404;
  --heat-loss-2: #7f0303;
  --heat-loss-1: #4a0202;
  --heat-zero: #232b35;
  --heat-gain-1: #012816;
  --heat-gain-2: #024626;
  --heat-gain-3: #025d33;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55);
}

/* Maximum-contrast variant for users who ask for more than 7:1. */
:root[data-theme='high-contrast'] {
  color-scheme: dark;

  --color-bg: #000000;
  --color-surface: #000000;
  --color-surface-raised: #0b0b0b;
  --color-surface-sunken: #000000;
  --color-border: #ffffff;
  --color-border-strong: #ffffff;

  --color-text: #ffffff;
  --color-text-muted: #f0f0f0;
  --color-text-inverse: #000000;

  --color-accent: #7cffc4;
  --color-accent-hover: #a9ffda;
  --color-accent-soft: #002316;
  --color-focus: #ffd400;

  --color-profit: #7cffc4;
  --color-profit-soft: #002316;
  --color-loss: #ffb3b3;
  --color-loss-soft: #2b0000;
  --color-warning-text: #ffd400;
  --color-warning-soft: #241c00;
  --color-info-text: #b9d4ff;
  --color-info-soft: #001028;

  --heat-loss-3: #a50404;
  --heat-loss-2: #7f0303;
  --heat-loss-1: #4a0202;
  --heat-zero: #1a1a1a;
  --heat-gain-1: #012816;
  --heat-gain-2: #024626;
  --heat-gain-3: #025d33;
}

/* Users who have not chosen explicitly follow the operating system. */
@media (prefers-color-scheme: dark) {
  :root[data-theme='system'] {
    color-scheme: dark;

    --color-bg: #0d1117;
    --color-surface: #151b23;
    --color-surface-raised: #1c242e;
    --color-surface-sunken: #10161d;
    --color-border: #3a4553;
    --color-border-strong: #6b7787;

    --color-text: #f2f5f8;
    --color-text-muted: #b6c0cc;
    --color-text-inverse: #0d1117;

    --color-accent: #3ddc97;
    --color-accent-hover: #6ae8b3;
    --color-accent-soft: #17392c;
    --color-focus: #8ab4ff;

    --color-profit: #4ade9b;
    --color-profit-soft: #14342a;
    --color-loss: #ff8f8f;
    --color-loss-soft: #3a1d1d;
    --color-warning-text: #f5c86b;
    --color-warning-soft: #3a2c12;
    --color-info-text: #a8c7ff;
    --color-info-soft: #16233c;

    --heat-loss-3: #a50404;
    --heat-loss-2: #7f0303;
    --heat-loss-1: #4a0202;
    --heat-zero: #232b35;
    --heat-gain-1: #012816;
    --heat-gain-2: #024626;
    --heat-gain-3: #025d33;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55);
  }
}

/* Reader controls (SC 1.4.8): line spacing set from the display settings panel. */
:root[data-line-spacing='relaxed'] {
  --line-height-body: 1.8;
}
:root[data-line-spacing='loose'] {
  --line-height-body: 2;
  --letter-spacing-body: 0.05em;
  --word-spacing-body: 0.16em;
}

:root[data-text-scale='112'] {
  --text-scale: 1.12;
}
:root[data-text-scale='125'] {
  --text-scale: 1.25;
}
:root[data-text-scale='150'] {
  --text-scale: 1.5;
}

:root[data-reading-width='narrow'] {
  --content-max: 60rem;
  --prose-max: 52ch;
}

/* Honour the platform request for reduced motion (SC 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --color-text-muted: #2b3038;
    --color-border: #6d7683;
  }
  :root[data-theme='dark'] {
    --color-text-muted: #e2e8ef;
    --color-border: #7d8796;
  }
}