@layer reset, base, components, utilities;

:root {
  color-scheme: light;

  /* Type */
  --font-sans: "Inter", "Metropolis", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-serif: "Zilla Slab", serif;
  --font-mono: "Fira Code", "Fira Mono", Menlo, Consolas, Monaco, monospace;
  --font-display: var(--font-serif);
  --font-body: var(--font-sans);

  --text-2xs: 0.625rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.75rem, 4vw, 2.5rem);

  --line-tight: 1.2;
  --line-base: 1.5;
  --line-loose: 1.75;

  /* Spacing */
  --inline-space: clamp(1rem, 1vw, 1.5rem);
  --inline-space-half: calc(var(--inline-space) * 0.5);
  --inline-space-double: calc(var(--inline-space) * 2);
  --block-space: clamp(1rem, 1vw, 1.5rem);
  --block-space-half: calc(var(--block-space) * 0.5);
  --block-space-double: calc(var(--block-space) * 2);
  --block-space-triple: calc(var(--block-space) * 3);

  /* Sizing */
  --main-width: 75rem;
  --main-padding: clamp(1.5rem, 5vw, 3rem);
  --panel-padding: 2rem;
  --control-height: 2.5rem;
  --pixel-border-width: 1px;
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* Motion */
  --ease-crisp: cubic-bezier(0.07, 0.95, 0, 1);
  --ease-bounce-soft: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* Z-index */
  --z-base: 1;
  --z-sticky: 10;
  --z-overlay: 30;
  --z-dialog: 40;
  --z-toast: 50;

  /* Core palette: Mozilla Protocol Light Theme */
  --color-black: #000000;
  --color-white: #ffffff;

  --color-canvas: #ffffff;
  --color-surface: #f9f9fb;
  --color-panel: #f0f0f4;
  --color-panel-strong: #e0e0e6;

  --color-ink: #15141a;
  --color-ink-darker: #000000;
  --color-ink-dark: #15141a;
  --color-ink-medium: #5b5b66;
  --color-ink-light: #8f8f9d;
  --color-ink-lighter: #cfcfd8;
  --color-ink-inverted: var(--color-white);

  --color-link: #0060df;
  --color-link-hover: #003eaa;
  --color-positive: #008787;
  --color-positive-soft: #e1f5f5;
  --color-warning: #ffbd4f;
  --color-warning-soft: #fff6e5;
  --color-negative: #d70022;
  --color-negative-soft: #ffe5e8;
  --color-accent: #0060df;
  --color-accent-soft: #e0edff;
  --color-visited: #8000d7;
  --color-visited-soft: #f2e5ff;

  --color-border: #cfcfd8;
  --color-border-strong: #8f8f9d;
  --color-highlight: var(--color-warning-soft);
  --color-selection: var(--color-accent-soft);
  --color-focus: #0060df;

  /* Surfaces */
  --surface-glow: none;
  --surface-grid: none;
  --surface-grid-size: 1rem 1rem;
  --surface-panel: var(--color-panel);

  /* Components */
  --border: var(--pixel-border-width) solid var(--color-border);
  --border-strong: var(--pixel-border-width) solid var(--color-border-strong);
  --shadow: 0 2px 4px rgba(21, 20, 26, 0.1), 0 4px 8px rgba(21, 20, 26, 0.05);
  --shadow-soft: 0 1px 2px rgba(21, 20, 26, 0.05);
  --focus-ring-size: 3px;
  --focus-ring-offset: 1px;
  --focus-ring: var(--focus-ring-size) solid color-mix(in srgb, var(--color-focus) 50%, transparent);

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

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --color-canvas: #09090b;
    --color-surface: #18181b;
    --color-panel: #27272a;
    --color-panel-strong: #3f3f46;

    --color-ink: #e4e4e7;
    --color-ink-darker: #ffffff;
    --color-ink-dark: #f4f4f5;
    --color-ink-medium: #a1a1aa;
    --color-ink-light: #71717a;
    --color-ink-lighter: #52525b;
    --color-ink-inverted: var(--color-black);

    --color-link: #3b82f6;
    --color-link-hover: #60a5fa;
    --color-positive: #059669;
    --color-positive-soft: #064e3b;
    --color-warning: #d97706;
    --color-warning-soft: #78350f;
    --color-negative: #dc2626;
    --color-negative-soft: #7f1d1d;
    --color-accent: #3b82f6;
    --color-accent-soft: #1e3a8a;
    --color-visited: #c084fc;
    --color-visited-soft: #581c87;

    --color-border: #3f3f46;
    --color-border-strong: #71717a;
    
    --color-highlight: var(--color-warning-soft);
    --color-selection: var(--color-accent-soft);
    --color-focus: #3b82f6;

    --shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.25);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
}

@media (max-width: 42rem) {
  :root {
    --text-xs: 0.875rem;
    --text-sm: 0.9375rem;
    --text-base: 1rem;
    --text-md: 1.0625rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
  }
}