@layer reset, base, components, modules, utilities;

@font-face {
  font-family: "Newsreader";
  src: url("/assets/Newsreader-Variable-fe979712.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("/assets/Newsreader-Italic-Variable-fd8d4ba4.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Spacing */
  --inline-space: 1ch;
  --inline-space-half: calc(var(--inline-space) / 2);
  --inline-space-double: calc(var(--inline-space) * 2);
  --block-space: 1rem;
  --block-space-quarter: calc(var(--block-space) / 4);
  --block-space-half: calc(var(--block-space) / 2);
  --block-space-3-4: calc(var(--block-space) * 0.75);
  --block-space-7-8: calc(var(--block-space) * 0.875);
  --block-space-1-25: calc(var(--block-space) * 1.25);
  --block-space-1-5: calc(var(--block-space) * 1.5);
  --block-space-double: calc(var(--block-space) * 2);
  --block-space-triple: calc(var(--block-space) * 3);

  /* Typography - Font Families */
  --font-body: 'Newsreader', Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
  --font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  --font-base: var(--font-sans);

  /* Typography - Line Heights */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Typography - Fluid type scale (responsive clamp values) */
  --text-xx-small: 0.6875rem;
  --text-x-small: clamp(0.6875rem, 0.125vw + 0.656rem, 0.75rem);
  --text-small: clamp(0.75rem, 0.125vw + 0.72rem, 0.8125rem);
  --text-normal: clamp(0.8125rem, 0.25vw + 0.75rem, 0.9375rem);
  --text-medium: clamp(0.875rem, 0.25vw + 0.8125rem, 1rem);
  --text-large: clamp(0.9375rem, 0.25vw + 0.875rem, 1.0625rem);
  --text-x-large: clamp(1.125rem, 0.25vw + 1.0625rem, 1.25rem);
  --text-xx-large: clamp(1.25rem, 0.25vw + 1.1875rem, 1.375rem);
  --text-xxx-large: clamp(1.625rem, 0.25vw + 1.5625rem, 1.75rem);
  --text-xxxx-large: clamp(2rem, 0.25vw + 1.9375rem, 2.125rem);

  /* Breakpoints (reference only - CSS custom properties can't be used in @media)
     ┌────────────┬─────────────────────────────┐
     │ Breakpoint │ Usage                       │
     ├────────────┼─────────────────────────────┤
     │ 640px      │ Small screens (mobile)      │
     │ 800px      │ Medium screens (tablet)     │
     │ 960px      │ Large screens               │
     └────────────┴─────────────────────────────┘
     Prefer capability queries: @media (any-hover: hover) { }
     Prefer ch units for content-based: @media (max-width: 60ch) { } */

  /* Layout - Content widths */
  --content-width: 60rem;
  --content-width-prose: 48rem;
  --content-width-sm: 42rem;
  --content-width-xs: 32rem;
  --content-width-xxs: 24rem;
  --main-padding: clamp(var(--inline-space), 3vw, calc(var(--inline-space) * 3));
  --header-height: 4rem;
  --footer-height: 3rem;
  --sidebar-width: 16rem;
  --max-width-form: 24rem;
  --max-width-form-wide: 30rem;
  --editor-min-height: 400px;
  --editor-panel-width: 320px;
  --chart-height: 200px;
  --email-preview-height: 600px;
  --profile-picture-size: 150px;
  --option-card-min-width: 120px;
  --stat-card-min-width: 12rem;
  --avatar-size-small: 1.5rem;
  --progress-bar-height: 2.5rem;
  --prompt-menu-max-height: 200px;
  --media-max-height: 32rem;

  /* Z-index hierarchy */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-popup: 10;

  /* ==========================================================================
     LCH TRIPLETS — Raw OKLCH values for alpha compositing
     Dark mode only redeclares --lch-* values; --color-* auto-adapts.
     Unlocks alpha compositing: oklch(var(--lch-green) / 50%).
     ========================================================================== */

  --lch-black: 0% 0 0;
  --lch-white: 100% 0 0;
  --lch-canvas: 100% 0 0;

  /* Teal ink scale (hue 195) */
  --lch-ink-lightest: 94% 0.004 195;
  --lch-ink-lighter: 75% 0.008 195;
  --lch-ink-light: 45% 0.015 195;
  --lch-ink: 16% 0.025 195;

  /* Green accent (hue 152) */
  --lch-green-light: 76% 0.18 152;
  --lch-green: 66% 0.24 152;
  --lch-green-dark: 56% 0.24 152;

  /* Red (hue 25) */
  --lch-red-light: 65% 0.18 25;
  --lch-red: 55% 0.22 25;
  --lch-red-dark: 45% 0.22 25;

  /* Warning (hue 85) */
  --lch-warning: 75% 0.15 85;

  /* ==========================================================================
     RESOLVED COLORS — Semantic aliases from LCH triplets
     ========================================================================== */

  /* Canvas & Ink */
  --color-canvas: oklch(var(--lch-canvas));
  --color-ink: oklch(var(--lch-ink));
  --color-ink-inverted: oklch(var(--lch-white));
  --color-ink-light: oklch(var(--lch-ink-light));
  --color-ink-lighter: oklch(var(--lch-ink-lighter));
  --color-ink-lightest: oklch(var(--lch-ink-lightest));

  /* Border & backgrounds */
  --color-border: oklch(var(--lch-ink-lightest));
  --color-quote-border: oklch(35% 0.02 195);
  --color-quote-bg: oklch(97% 0 0);

  /* Links (accent green) */
  --color-accent: oklch(var(--lch-green));
  --color-accent-hover: oklch(var(--lch-green-dark));
  --color-link: oklch(var(--lch-green));
  --color-link-hover: oklch(var(--lch-green-dark));
  --color-positive: oklch(var(--lch-green));

  /* Status colors */
  --color-negative: oklch(var(--lch-red));
  --color-negative-hover: oklch(var(--lch-red-dark));
  --color-warning: oklch(var(--lch-warning));

  /* Selection (subtle teal tint) */
  --color-selected-light: oklch(96% 0.01 195);
  --color-selected: oklch(92% 0.015 195);
  --color-selected-dark: oklch(85% 0.02 195);

  /* Opacity variants — alpha compositing with LCH triplets */
  --color-ink-inverted-10: oklch(var(--lch-white) / 10%);
  --color-ink-inverted-15: oklch(var(--lch-white) / 15%);
  --color-ink-inverted-50: oklch(var(--lch-white) / 50%);
  --color-ink-inverted-60: oklch(var(--lch-white) / 60%);
  --color-ink-inverted-80: oklch(var(--lch-white) / 80%);
  --color-accent-50: oklch(var(--lch-green) / 50%);
  --color-link-50: oklch(var(--lch-green) / 50%);
  --color-negative-50: oklch(var(--lch-red) / 50%);
  --color-overlay: oklch(var(--lch-ink) / 70%);
  --color-focus-ring: oklch(var(--lch-ink) / 10%);
  --color-outline-subtle: oklch(var(--lch-ink) / 20%);
  --color-caption: oklch(var(--lch-ink) / 66%);

  /* Badge colors */
  --color-badge-success-bg: oklch(var(--lch-ink) / 10%);
  --color-badge-success-text: oklch(var(--lch-ink));
  --color-badge-warning-bg: oklch(var(--lch-warning) / 20%);
  --color-badge-warning-text: oklch(var(--lch-warning));
  --color-badge-danger-bg: oklch(var(--lch-red) / 15%);
  --color-badge-danger-text: oklch(var(--lch-red));
  --color-badge-info-bg: oklch(var(--lch-ink) / 8%);
  --color-badge-info-text: oklch(var(--lch-ink-light));

  /* Code backgrounds */
  --color-code-bg: var(--color-ink-lightest);

  /* Code syntax highlighting */
  --color-code-token__keyword: oklch(var(--lch-ink));
  --color-code-token__string: oklch(35% 0.03 195);
  --color-code-token__function: oklch(var(--lch-ink));
  --color-code-token__comment: oklch(var(--lch-ink-light));
  --color-code-token__punctuation: oklch(var(--lch-ink-lighter));
  --color-code-token__operator: oklch(var(--lch-ink));
  --color-code-token__property: oklch(28% 0.025 195);
  --color-code-token__selector: oklch(30% 0.02 195);
  --color-code-token__variable: oklch(40% 0.02 195);
  --color-code-token__att: oklch(var(--lch-ink));

  /* Focus rings */
  --focus-ring-color: var(--color-link);
  --focus-ring-offset: 1px;
  --focus-ring-size: 2px;

  /* Components */
  --status-dot-size: 0.5625rem;
  --toolbar-button-size-mobile: 44px;
  --toolbar-button-size: 2em;
  --text-underline-offset: 2px;
  --border-radius: 0.375rem;
  --border-radius-pill: 9999px;
  --border-radius-percent: 5%;
  --focus-ring: 2px solid var(--color-link);
  --shadow: 0 1px 3px oklch(0% 0 0 / 0.1);
  --shadow-md: 0 2px 8px oklch(var(--lch-ink) / 10%);
  --shadow-panel: -4px 0 20px oklch(0% 0 0 / 0.1);
  --table-cell-padding: var(--block-space-3-4);

  /* Easing functions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-overshoot: cubic-bezier(0.25, 1.75, 0.5, 1);
  --ease-out-overshoot-subtle: cubic-bezier(0.25, 1.25, 0.5, 1);

  /* Typography details */
  --letter-spacing-caps: 0.05em;
}

/* ==========================================================================
   DARK MODE SUPPORT
   Redeclare --lch-* values only; all --color-* aliases auto-adapt.
   ========================================================================== */

/* Explicit theme choice (highest priority) */
html[data-theme="dark"] {
  --lch-canvas: 15% 0.02 195;
  --lch-ink-lightest: 22% 0.015 195;
  --lch-ink-lighter: 35% 0.012 195;
  --lch-ink-light: 70% 0.010 195;
  --lch-ink: 94% 0.004 195;

  --lch-green-light: 30% 0.05 152;
  --lch-green: 55% 0.18 152;
  --lch-green-dark: 65% 0.15 152;

  --lch-red-light: 35% 0.05 25;
  --lch-red: 60% 0.22 25;
  --lch-red-dark: 72% 0.18 25;

  --lch-warning: 65% 0.12 85;

  --color-quote-border: oklch(55% 0.015 195);
  --color-quote-bg: oklch(18% 0.015 195);
  --color-selected-light: oklch(20% 0.015 195);
  --color-selected: oklch(25% 0.02 195);
  --color-selected-dark: oklch(30% 0.025 195);

  --shadow: 0 0 0 1px oklch(var(--lch-black) / 42%),
            0 0.2em 1.6em -0.8em oklch(var(--lch-black) / 60%),
            0 0.4em 2.4em -1em oklch(var(--lch-black) / 70%);
}

/* System preference (when no explicit theme) */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --lch-canvas: 15% 0.02 195;
    --lch-ink-lightest: 22% 0.015 195;
    --lch-ink-lighter: 35% 0.012 195;
    --lch-ink-light: 70% 0.010 195;
    --lch-ink: 94% 0.004 195;

    --lch-green-light: 30% 0.05 152;
    --lch-green: 55% 0.18 152;
    --lch-green-dark: 65% 0.15 152;

    --lch-red-light: 35% 0.05 25;
    --lch-red: 60% 0.22 25;
    --lch-red-dark: 72% 0.18 25;

    --lch-warning: 65% 0.12 85;

    --color-quote-border: oklch(55% 0.015 195);
    --color-quote-bg: oklch(18% 0.015 195);
    --color-selected-light: oklch(20% 0.015 195);
    --color-selected: oklch(25% 0.02 195);
    --color-selected-dark: oklch(30% 0.025 195);

    --shadow: 0 0 0 1px oklch(var(--lch-black) / 42%),
              0 0.2em 1.6em -0.8em oklch(var(--lch-black) / 60%),
              0 0.4em 2.4em -1em oklch(var(--lch-black) / 70%);
  }
}