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

/* IBM Plex Mono, served from vendor/assets/fonts (Google Fonts v20, OFL). Each
   face is split into latin and latin-ext files; unicode-range keeps latin-ext
   from downloading until the text needs a glyph outside latin. */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-latin-400-d803141a.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-latin-500-3f7bbac1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-latin-600-b71798d4.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-latin-400-italic-dd52445f.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-latin-600-italic-e8c18a56.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-latin-ext-400-d3045dec.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-latin-ext-500-82f2cde0.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-latin-ext-600-8ec3630d.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-latin-ext-400-italic-0b35524e.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-latin-ext-600-italic-9a4abedb.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Spacing (Fizzy pattern: ch for inline, rem for block) */
  --inline-space: 1ch;
  --inline-space-quarter: calc(var(--inline-space) / 4);
  --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-eighth: calc(var(--block-space) / 8);
  --block-space-quarter: calc(var(--block-space) / 4);
  --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-prose: "IBM Plex Mono", ui-monospace, monospace;
  --font-mono: ui-monospace, monospace;
  --text-xs: 0.75rem;
  --text-small: 0.85rem;
  --text-normal: 1rem;
  --text-medium: 1.1rem;
  --text-prose: 1.0625rem;
  --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;

  color-scheme: light;

  /* OKLCH Colors -- light mode */
  --lch-canvas: 98.8% 0 0;
  --lch-surface: 96.5% 0 0;
  --lch-ink-darkest: 24% 0 0;
  --lch-ink-dark: 38% 0 0;
  --lch-ink-medium: 52% 0 0;
  --lch-ink-light: 64% 0 0;
  --lch-ink-lighter: 90% 0 0;

  /* The one accent, the caret blue. Its hover sits further from the canvas. */
  --lch-accent: 52% 0.14 250;
  --lch-accent-hover: 46% 0.14 250;
  --lch-positive: 52% 0 0;
  --lch-negative: 50% 0.17 28;
  --lch-warning: 50% 0.1 70;
  --lch-selection: 89% 0.05 245;

  --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-accent: oklch(var(--lch-accent));
  --color-accent-hover: oklch(var(--lch-accent-hover));
  --color-negative: oklch(var(--lch-negative));
  --color-positive: oklch(var(--lch-positive));
  --color-warning: oklch(var(--lch-warning));

  /* Backdrop behind dialogs and drawers */
  --overlay: oklch(24% 0 0 / 0.28);

  /* Layout */
  --drawer-width: clamp(14rem, 22dvw, 22rem);
  --nav-height: 3.5rem;
  --tab-bar-height: 3.25rem;
  /* About 66 characters a line: IBM Plex Mono advances 0.6em, plus the
     editor's and the prose box's inline padding and the prose box's border. */
  --editor-max-width: calc(66 * 0.6 * var(--text-prose) + 2 * (var(--block-space) + var(--block-space-half) + 1px));
  --touch-target-min: 32px; /* WCAG 2.5.8 */

  /* Z-index scale */
  --z-base: 1;
  --z-footer: 15;
  --z-nav: 20;
  --z-drawer-overlay: 25;
  --z-drawer: 30;
  --z-tab-bar: 35;
  --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 */
  --border: 1px solid oklch(var(--lch-ink-lighter));
  --border-strong: 1px solid oklch(var(--lch-ink-light));
  --radius: 3px;

  /* Focus */
  --focus-ring: 2px solid var(--color-accent);
  --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-accent);
  --color-status-offline: var(--color-warning);
  --color-status-error: var(--color-negative);

  /* Entity type colors (for detection highlights and badges) */
  --lch-entity-character: 52% 0.16 315;
  --lch-entity-location: 55% 0.12 155;
  --lch-entity-lore-entry: 62% 0.14 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"]) {
    color-scheme: dark;

    --lch-canvas: 17% 0.006 250;
    --lch-surface: 21% 0.008 250;
    --lch-ink-darkest: 88% 0.004 250;
    --lch-ink-dark: 76% 0.005 250;
    --lch-ink-medium: 66% 0.006 250;
    --lch-ink-light: 51% 0.008 250;
    --lch-ink-lighter: 28% 0.008 250;

    --lch-accent: 74% 0.13 235;
    --lch-accent-hover: 80% 0.13 235;
    --lch-positive: 66% 0.006 250;
    --lch-negative: 72% 0.14 30;
    --lch-warning: 82% 0.12 85;
    --lch-selection: 35% 0.07 240;

    --lch-entity-character: 72% 0.13 315;
    --lch-entity-location: 76% 0.12 155;
    --lch-entity-lore-entry: 78% 0.12 65;

    --overlay: oklch(0% 0 0 / 0.5);
  }
}

/* Explicit dark mode toggle (user preference overrides system) */
:root[data-theme="dark"] {
  color-scheme: dark;

  --lch-canvas: 17% 0.006 250;
  --lch-surface: 21% 0.008 250;
  --lch-ink-darkest: 88% 0.004 250;
  --lch-ink-dark: 76% 0.005 250;
  --lch-ink-medium: 66% 0.006 250;
  --lch-ink-light: 51% 0.008 250;
  --lch-ink-lighter: 28% 0.008 250;

  --lch-accent: 74% 0.13 235;
  --lch-accent-hover: 80% 0.13 235;
  --lch-positive: 66% 0.006 250;
  --lch-negative: 72% 0.14 30;
  --lch-warning: 82% 0.12 85;
  --lch-selection: 35% 0.07 240;

  --lch-entity-character: 72% 0.13 315;
  --lch-entity-location: 76% 0.12 155;
  --lch-entity-lore-entry: 78% 0.12 65;

  --overlay: oklch(0% 0 0 / 0.5);
}