@layer reset, base, components, utilities;

: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 - Apple HIG Dynamic Type (iOS Small → iOS Large) */
  --text-caption-2: 0.6875rem;
  --text-caption: clamp(0.6875rem, 0.125vw + 0.656rem, 0.75rem);
  --text-footnote: clamp(0.75rem, 0.125vw + 0.72rem, 0.8125rem);
  --text-subhead: clamp(0.8125rem, 0.25vw + 0.75rem, 0.9375rem);
  --text-callout: clamp(0.875rem, 0.25vw + 0.8125rem, 1rem);
  --text-body: clamp(0.9375rem, 0.25vw + 0.875rem, 1.0625rem);
  --text-headline: clamp(0.9375rem, 0.25vw + 0.875rem, 1.0625rem);
  --text-title-3: clamp(1.125rem, 0.25vw + 1.0625rem, 1.25rem);
  --text-title-2: clamp(1.25rem, 0.25vw + 1.1875rem, 1.375rem);
  --text-title-1: clamp(1.625rem, 0.25vw + 1.5625rem, 1.75rem);
  --text-large-title: 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-width: 960px;
  --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;

  /* ==========================================================================
     TWO-TONE COLOR PALETTE
     Dark Teal: rgb(0, 29, 33) - for text, buttons
     Pure White: #ffffff - for canvas
     Accent Green: for links
     ========================================================================== */

  /* Core tones */
  --tone-dark: oklch(16% 0.025 195);
  --tone-light: oklch(100% 0 0);
  --tone-hue: 195;

  /* Accent color (green for links) */
  --color-accent: oklch(66% 0.24 152);
  --color-accent-hover: oklch(56% 0.24 152);

  /* Canvas & Ink */
  --color-canvas: var(--tone-light);
  --color-ink: var(--tone-dark);
  --color-ink-inverted: var(--tone-light);

  /* Ink scale (interpolated from dark tone) */
  --color-ink-light: oklch(45% 0.015 var(--tone-hue));
  --color-ink-lighter: oklch(75% 0.008 var(--tone-hue));
  --color-ink-lightest: oklch(94% 0.004 var(--tone-hue));

  /* Border & backgrounds */
  --color-border: oklch(92% 0 0);
  --color-quote-border: oklch(35% 0.02 var(--tone-hue));
  --color-quote-bg: oklch(97% 0 0);

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

  /* Status colors (exceptions to two-tone) */
  --color-negative: oklch(55% 0.22 25);
  --color-negative-hover: oklch(45% 0.22 25);
  --color-warning: oklch(75% 0.15 85);

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

  /* Opacity variants - for dark backgrounds */
  --color-ink-inverted-10: color-mix(in oklch, var(--tone-light) 10%, transparent);
  --color-ink-inverted-15: color-mix(in oklch, var(--tone-light) 15%, transparent);
  --color-ink-inverted-50: color-mix(in oklch, var(--tone-light) 50%, transparent);
  --color-ink-inverted-60: color-mix(in oklch, var(--tone-light) 60%, transparent);
  --color-ink-inverted-80: color-mix(in oklch, var(--tone-light) 80%, transparent);

  /* Opacity variants - other */
  --color-accent-50: color-mix(in oklch, var(--color-accent) 50%, transparent);
  --color-link-50: var(--color-accent-50);
  --color-negative-50: color-mix(in oklch, var(--color-negative) 50%, transparent);
  --color-overlay: color-mix(in oklch, var(--tone-dark) 70%, transparent);
  --color-focus-ring: color-mix(in oklch, var(--tone-dark) 10%, transparent);
  --color-outline-subtle: color-mix(in oklch, var(--tone-dark) 20%, transparent);
  --color-caption: color-mix(in oklch, var(--color-ink) 66%, transparent);

  /* Badge colors (derived from two-tone + status) */
  --color-badge-success-bg: color-mix(in oklch, var(--tone-dark) 10%, transparent);
  --color-badge-success-text: var(--tone-dark);
  --color-badge-warning-bg: color-mix(in oklch, var(--color-warning) 20%, transparent);
  --color-badge-warning-text: color-mix(in oklch, var(--color-warning) 100%, oklch(0% 0 0 / 0.4));
  --color-badge-danger-bg: color-mix(in oklch, var(--color-negative) 15%, transparent);
  --color-badge-danger-text: color-mix(in oklch, var(--color-negative) 100%, oklch(0% 0 0 / 0.3));
  --color-badge-info-bg: color-mix(in oklch, var(--tone-dark) 8%, transparent);
  --color-badge-info-text: color-mix(in oklch, var(--tone-dark) 60%, var(--tone-light));

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

  /* Code syntax highlighting (two-tone: teal + grays) */
  --color-code-token__keyword: var(--tone-dark);
  --color-code-token__string: oklch(35% 0.03 var(--tone-hue));
  --color-code-token__function: var(--tone-dark);
  --color-code-token__comment: var(--color-ink-light);
  --color-code-token__punctuation: var(--color-ink-lighter);
  --color-code-token__operator: var(--tone-dark);
  --color-code-token__property: oklch(28% 0.025 var(--tone-hue));
  --color-code-token__selector: oklch(30% 0.02 var(--tone-hue));
  --color-code-token__variable: oklch(40% 0.02 var(--tone-hue));
  --color-code-token__att: var(--tone-dark);

  /* 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 color-mix(in oklch, var(--tone-dark) 10%, transparent);
  --shadow-panel: -4px 0 20px oklch(0% 0 0 / 0.1);
  --table-cell-padding: var(--block-space-3-4);

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