/* Layer declaration -- order determines specificity. Declared once, here. */
@layer reset, base, components, utilities;

:root {
  /* Spacing (Fizzy pattern: ch for inline, rem for block) */
  --inline-space: 1ch;
  --inline-space-half: calc(var(--inline-space) / 2);
  --inline-space-double: calc(var(--inline-space) * 2);
  --inline-space-triple: calc(var(--inline-space) * 3);
  --block-space: 1rem;
  --block-space-half: calc(var(--block-space) / 2);
  --block-space-double: calc(var(--block-space) * 2);
  --block-space-triple: calc(var(--block-space) * 3);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --font-serif: "Georgia", "Iowan Old Style", "Palatino Linotype", ui-serif, serif;
  --font-mono: ui-monospace, monospace;
  --text-xs: 0.75rem;
  --text-small: 0.85rem;
  --text-normal: 1rem;
  --text-medium: 1.1rem;
  --text-large: 1.5rem;
  --text-xl: 2rem;
  --text-2xl: 2.5rem;
  --text-3xl: 3rem;
  --line-height: 1.5;
  --line-height-tight: 1.25;
  --line-height-loose: 1.7;

  /* Accent -- warm amber for creative warmth */
  --lch-accent: 72% 0.14 55;
  --lch-accent-hover: 64% 0.16 55;
  --color-accent: oklch(var(--lch-accent));
  --color-accent-hover: oklch(var(--lch-accent-hover));

  /* OKLCH Colors -- light mode */
  --lch-canvas: 100% 0 0;
  --lch-surface: 97% 0.002 254;
  --lch-ink-darkest: 26% 0.05 264;
  --lch-ink-dark: 56% 0.014 260;
  --lch-ink-medium: 66% 0.008 258;
  --lch-ink-light: 84% 0.005 256;
  --lch-ink-lighter: 92% 0.003 254;

  /* Accent colors -- tier 1 (raw LCH) */
  --lch-link: 57% 0.19 260;
  --lch-link-hover: 47% 0.19 260;
  --lch-positive: 55% 0.162 147;
  --lch-negative: 59% 0.19 38;
  --lch-warning: 75% 0.15 85;

  --color-canvas: oklch(var(--lch-canvas));
  --color-surface: oklch(var(--lch-surface));
  --color-ink: oklch(var(--lch-ink-darkest));
  --color-ink-secondary: oklch(var(--lch-ink-dark));
  --color-ink-muted: oklch(var(--lch-ink-medium));
  --color-link: oklch(var(--lch-link));
  --color-link-hover: oklch(var(--lch-link-hover));
  --color-negative: oklch(var(--lch-negative));
  --color-positive: oklch(var(--lch-positive));
  --color-warning: oklch(var(--lch-warning));

  /* Layout */
  --drawer-width: clamp(14rem, 22dvw, 22rem);
  --nav-height: 3.5rem;
  --tab-bar-height: 3.25rem;
  --editor-max-width: 50rem;

  /* Z-index scale */
  --z-base: 1;
  --z-nav: 20;
  --z-drawer-overlay: 25;
  --z-drawer: 30;
  --z-tab-bar: 35;
  --z-flash: 40;
  --z-popover: 45;
  --z-dialog: 50;

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

  /* Borders and shadows */
  --border: 1px solid oklch(var(--lch-ink-lighter));
  --border-strong: 1px solid oklch(var(--lch-ink-light));
  --shadow: 0 0 0 1px oklch(0% 0 0 / 5%), 0 0.2em 0.2em oklch(0% 0 0 / 5%);
  --shadow-lg: 0 0.4em 1.2em oklch(0% 0 0 / 12%);
  --radius: 0.375rem;
  --radius-sm: 0.125rem;
  --radius-lg: 0.625rem;
  --radius-pill: 99rem;

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

  /* Transitions */
  --transition-fast: 120ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 350ms ease;

  /* Connection status colors */
  --color-status-saved: var(--color-positive);
  --color-status-saving: var(--color-link);
  --color-status-offline: var(--color-warning);
  --color-status-error: var(--color-negative);

  /* Entity type colors (for detection highlights and badges) */
  --lch-entity-character: 60% 0.17 300;
  --lch-entity-location: 60% 0.15 170;
  --lch-entity-lore-entry: 65% 0.16 60;
  --color-entity-character: oklch(var(--lch-entity-character));
  --color-entity-location: oklch(var(--lch-entity-location));
  --color-entity-lore-entry: oklch(var(--lch-entity-lore-entry));

}

/* Dark mode -- reassign OKLCH lightness/chroma values */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lch-canvas: 20% 0.02 233;
    --lch-surface: 24% 0.02 233;
    --lch-ink-darkest: 96% 0.003 260;
    --lch-ink-dark: 74% 0.009 260;
    --lch-ink-medium: 62% 0.012 260;
    --lch-ink-light: 40% 0.015 260;
    --lch-ink-lighter: 30% 0.018 260;

    --lch-link: 74% 0.13 258;
    --lch-link-hover: 82% 0.10 258;
    --lch-positive: 74% 0.12 145;
    --lch-negative: 74% 0.14 40;
    --lch-warning: 82% 0.12 85;

    --lch-entity-character: 78% 0.13 300;
    --lch-entity-location: 78% 0.11 170;
    --lch-entity-lore-entry: 80% 0.12 60;

    --lch-accent: 80% 0.12 55;
    --lch-accent-hover: 85% 0.10 55;

    --shadow: 0 0 0 1px oklch(100% 0 0 / 5%), 0 0.2em 0.2em oklch(0% 0 0 / 20%);
    --shadow-lg: 0 0.4em 1.2em oklch(0% 0 0 / 30%);
  }
}

/* Explicit dark mode toggle (user preference overrides system) */
:root[data-theme="dark"] {
  --lch-canvas: 20% 0.02 233;
  --lch-surface: 24% 0.02 233;
  --lch-ink-darkest: 96% 0.003 260;
  --lch-ink-dark: 74% 0.009 260;
  --lch-ink-medium: 62% 0.012 260;
  --lch-ink-light: 40% 0.015 260;
  --lch-ink-lighter: 30% 0.018 260;

  --lch-link: 74% 0.13 258;
  --lch-link-hover: 82% 0.10 258;
  --lch-positive: 74% 0.12 145;
  --lch-negative: 74% 0.14 40;
  --lch-warning: 82% 0.12 85;

  --lch-entity-character: 78% 0.13 300;
  --lch-entity-location: 78% 0.11 170;
  --lch-entity-lore-entry: 80% 0.12 60;

  --lch-accent: 80% 0.12 55;
  --lch-accent-hover: 85% 0.10 55;

  --shadow: 0 0 0 1px oklch(100% 0 0 / 5%), 0 0.2em 0.2em oklch(0% 0 0 / 20%);
  --shadow-lg: 0 0.4em 1.2em oklch(0% 0 0 / 30%);
}