@layer reset, base, components, utilities;

:root {
  /* Spacing - character-based for horizontal, rem for vertical */
  --inline-space: 1ch;
  --inline-space-half: calc(var(--inline-space) / 2);
  --inline-space-double: calc(var(--inline-space) * 2);
  --block-space: 1rem;
  --block-space-half: calc(var(--block-space) / 2);
  --block-space-double: calc(var(--block-space) * 2);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", Monaco, Inconsolata, "Fira Code", "Courier New", monospace;

  --text-base: 1rem;
  --text-small: 0.875rem;
  --text-large: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;

  /* Layout */
  --container-width: 1200px;
  --container-padding: clamp(1rem, 3vw, 2rem);
  --border-radius: 0.5rem;
  --border-radius-sm: 0.25rem;

  /* OKLCH Colors - Perceptually uniform color space */
  /* Light mode values */
  --lch-canvas: 100% 0 0;           /* White background */
  --lch-ink: 26% 0.05 264;          /* Dark text */
  --lch-ink-light: 60% 0.02 264;    /* Light gray text */
  --lch-ink-lighter: 85% 0.01 264;  /* Very light gray */

  /* Primary colors - Roman Catholic Red */
  --lch-primary: 51% 0.24 25;        /* #EA002A - Red-500 */
  --lch-primary-dark: 44% 0.21 23;   /* #C50024 - Red-600 */
  --lch-primary-light: 94% 0.02 15;  /* #FCE5EA - Red-100 */

  /* Semantic colors */
  --lch-success: 65% 0.23 142;      /* Green */
  --lch-info: 62% 0.17 240;         /* #00A5E9 - Information-500 */
  --lch-info-dark: 52% 0.15 240;    /* #0084BA - Information-600 */
  --lch-info-light: 95% 0.03 240;   /* #E5F6FD - Information-50 */
  --lch-error: 57% 0.25 25;         /* #FF262C - Danger-500 */
  --lch-warning: 75% 0.18 85;       /* Yellow */

  /* Semantic color definitions */
  --color-canvas: oklch(var(--lch-canvas));
  --color-ink: oklch(var(--lch-ink));
  --color-ink-light: oklch(var(--lch-ink-light));
  --color-ink-lighter: oklch(var(--lch-ink-lighter));

  --color-primary: oklch(var(--lch-primary));
  --color-primary-dark: oklch(var(--lch-primary-dark));
  --color-primary-light: oklch(var(--lch-primary-light));

  --color-success: oklch(var(--lch-success));
  --color-info: oklch(var(--lch-info));
  --color-info-dark: oklch(var(--lch-info-dark));
  --color-info-light: oklch(var(--lch-info-light));
  --color-error: oklch(var(--lch-error));
  --color-warning: oklch(var(--lch-warning));

  /* Derived colors using color-mix */
  --color-border: color-mix(in srgb, var(--color-ink) 15%, transparent);
  --color-hover: color-mix(in srgb, var(--color-info) 10%, var(--color-canvas));
  --color-selected: color-mix(in srgb, var(--color-info) 8%, var(--color-canvas));

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 oklch(var(--lch-ink) / 0.05);
  --shadow: 0 2px 8px oklch(var(--lch-ink) / 0.1);
  --shadow-lg: 0 4px 12px oklch(var(--lch-ink) / 0.15);

  /* Transitions */
  --transition-fast: 100ms ease;
  --transition: 200ms ease;
  --transition-slow: 300ms ease;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  :root {
    --lch-canvas: 20% 0.02 264;
    --lch-ink: 96% 0.01 264;
    --lch-ink-light: 70% 0.02 264;
    --lch-ink-lighter: 35% 0.03 264;

    --lch-primary: 70% 0.22 25;
    --lch-primary-dark: 78% 0.20 25;
    --lch-primary-light: 35% 0.12 25;

    --lch-success: 75% 0.20 145;
    --lch-info: 72% 0.14 240;
    --lch-info-dark: 80% 0.12 240;
    --lch-info-light: 30% 0.08 240;
    --lch-error: 74% 0.22 25;
    --lch-warning: 85% 0.15 85;
  }
}