/* ==========================================================================
   Global — Layer order, OKLCH primitives, semantic tokens.
   Loaded first via explicit <link> order in the layout.
   ========================================================================== */

@layer reset, base, modules, components, pages, utilities, native, platform;

/* --------------------------------------------------------------------------
   OKLCH primitives — the single source of truth for color.
   Dark mode redefines these; every derivative updates automatically.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Ink scale (grayscale with subtle blue hue) */
  --lch-ink-darkest:  17% 0.012 250;
  --lch-ink-darker:   26% 0.015 250;
  --lch-ink-dark:     38% 0.010 250;
  --lch-ink-medium:   50% 0.008 250;
  --lch-ink-light:    68% 0.010 250;
  --lch-ink-lighter:  85% 0.012 250;
  --lch-ink-lightest: 96% 0.005 250;

  /* Canvas */
  --lch-canvas:          100% 0 0;
  --lch-canvas-elevated:  96% 0.005 250;
  --lch-canvas-overlay:   92% 0.012 250;

  /* Brand — blue (link / primary action) */
  --lch-link:           54% 0.20 255;
  --lch-link-hover:     48% 0.18 255;
  --lch-primary:        54% 0.20 255;
  --lch-primary-hover:  48% 0.18 255;
  --lch-primary-active: 42% 0.16 255;
  --lch-primary-soft:   97% 0.02 250;

  /* Brand — emerald (secondary action) */
  --lch-secondary:       62% 0.15 160;
  --lch-secondary-hover: 55% 0.14 160;

  /* Focus */
  --lch-focus-primary:   54% 0.25 255;
  --lch-focus-secondary: 95% 0.20 100;
}

/* Dark mode — redefine primitives only. Same values used by both
   `prefers-color-scheme: dark` (with no explicit override) and
   the explicit `data-theme="dark"` choice. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --lch-ink-darkest:  96% 0.005 250;
    --lch-ink-darker:   85% 0.012 250;
    --lch-ink-dark:     68% 0.010 250;
    --lch-ink-medium:   50% 0.008 250;
    --lch-ink-light:    38% 0.010 250;
    --lch-ink-lighter:  26% 0.015 250;
    --lch-ink-lightest: 22% 0.015 250;

    --lch-canvas:          17% 0.012 250;
    --lch-canvas-elevated: 22% 0.015 250;
    --lch-canvas-overlay:  26% 0.015 250;

    --lch-link:           70% 0.15 250;
    --lch-link-hover:     93% 0.04 250;
    --lch-primary:        60% 0.18 255;
    --lch-primary-hover:  70% 0.15 250;
    --lch-primary-active: 54% 0.20 255;
    --lch-primary-soft:   36% 0.12 255;

    --lch-secondary:       70% 0.17 160;
    --lch-secondary-hover: 58% 0.14 160;

    --lch-focus-primary:   72% 0.16 248;
    --lch-focus-secondary: 95% 0.15 100;
  }
}

html[data-theme="dark"] {
  --lch-ink-darkest:  96% 0.005 250;
  --lch-ink-darker:   85% 0.012 250;
  --lch-ink-dark:     68% 0.010 250;
  --lch-ink-medium:   50% 0.008 250;
  --lch-ink-light:    38% 0.010 250;
  --lch-ink-lighter:  26% 0.015 250;
  --lch-ink-lightest: 22% 0.015 250;

  --lch-canvas:          17% 0.012 250;
  --lch-canvas-elevated: 22% 0.015 250;
  --lch-canvas-overlay:  26% 0.015 250;

  --lch-link:           70% 0.15 250;
  --lch-link-hover:     93% 0.04 250;
  --lch-primary:        60% 0.18 255;
  --lch-primary-hover:  70% 0.15 250;
  --lch-primary-active: 54% 0.20 255;
  --lch-primary-soft:   36% 0.12 255;

  --lch-secondary:       70% 0.17 160;
  --lch-secondary-hover: 58% 0.14 160;

  --lch-focus-primary:   72% 0.16 248;
  --lch-focus-secondary: 95% 0.15 100;
}

html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

/* --------------------------------------------------------------------------
   Semantic color tokens — derived from primitives, no light-dark()
   needed because primitives flip in dark mode.
   -------------------------------------------------------------------------- */
:root {
  --color-ink-primary:   oklch(var(--lch-ink-darkest));
  --color-ink-secondary: oklch(var(--lch-ink-dark));
  --color-ink-tertiary:  oklch(var(--lch-ink-medium));
  --color-ink-inverted:  oklch(var(--lch-canvas));

  --color-link:       oklch(var(--lch-link));
  --color-link-hover: oklch(var(--lch-link-hover));

  --surface-base:     oklch(var(--lch-canvas));
  --surface-elevated: oklch(var(--lch-canvas-elevated));
  --surface-overlay:  oklch(var(--lch-canvas-overlay));

  --border-default: oklch(var(--lch-ink-lighter));
  --border-subtle:  oklch(var(--lch-ink-lightest));
  --border-strong:  oklch(var(--lch-ink-light));

  --interactive-primary:        oklch(var(--lch-primary));
  --interactive-primary-hover:  oklch(var(--lch-primary-hover));
  --interactive-primary-active: oklch(var(--lch-primary-active));
  --interactive-secondary:       oklch(var(--lch-secondary));
  --interactive-secondary-hover: oklch(var(--lch-secondary-hover));

  --focus-primary:   oklch(var(--lch-focus-primary));
  --focus-secondary: oklch(var(--lch-focus-secondary));

  --nav-background:     oklch(var(--lch-canvas));
  --nav-border:         oklch(var(--lch-ink-lighter));
  --nav-link-color:     oklch(var(--lch-ink-darker));
  --nav-link-hover:     oklch(var(--lch-ink-darkest));
  --nav-link-active:    oklch(var(--lch-link));
  --nav-link-active-bg: oklch(var(--lch-primary-soft));
}

/* --------------------------------------------------------------------------
   Card component tokens (consumed by .service-card, .contact-block).
   -------------------------------------------------------------------------- */
:root {
  --card-bg:           var(--surface-elevated);
  --card-border-color: var(--border-default);
  --card-radius:       var(--radius-lg);
  --card-padding:      var(--space-6);
}

/* --------------------------------------------------------------------------
   Typography — system font stacks, semantic type scale.
   -------------------------------------------------------------------------- */
:root {
  --font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-x-small:  0.75rem;
  --text-small:    0.875rem;
  --text-normal:   1rem;
  --text-medium:   1.125rem;
  --text-large:    1.25rem;
  --text-x-large:  1.5rem;
  --text-xx-large: 1.875rem;

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:   1.25;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.75;
}

/* --------------------------------------------------------------------------
   Spacing — character-based inline rhythm, rem-based block rhythm
   for component padding/margins. Numeric --space-N scale stays for
   layout gaps where neither axis is text-aligned.
   -------------------------------------------------------------------------- */
:root {
  --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);

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --section-padding-y: var(--space-16);
  --section-max-width: 64rem;
  --section-gap:       var(--space-12);

  --radius-sm:   0.125rem;
  --radius-base: 0.25rem;
  --radius-md:   0.375rem;
  --radius-lg:   0.5rem;
  --radius-xl:   0.75rem;
  --radius-2xl:  1rem;
  --radius-full: 9999px;

  --shadow-sm:   0 1px 2px 0 oklch(0% 0 0 / 0.05);
  --shadow-base: 0 1px 3px 0 oklch(0% 0 0 / 0.10), 0 1px 2px -1px oklch(0% 0 0 / 0.10);
  --shadow-md:   0 4px 6px -1px oklch(0% 0 0 / 0.10), 0 2px 4px -2px oklch(0% 0 0 / 0.10);
  --shadow-lg:   0 10px 15px -3px oklch(0% 0 0 / 0.10), 0 4px 6px -4px oklch(0% 0 0 / 0.10);

  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  --z-base:     0;
  --z-dropdown: 10;
  --z-sticky:   20;
  --z-fixed:    30;
  --z-modal:    50;
  --z-tooltip:  70;
}