/* Design Tokens - OKLCH Color System */
@layer tokens {
  :root {
    /* Color Palette - OKLCH */
    --sccx-primary-h: 10;
    --sccx-primary-c: 0.12;
    --sccx-primary-l: 0.35;

    --sccx-accent-h: 330;
    --sccx-accent-c: 0.18;
    --sccx-accent-l: 0.55;

    --sccx-neutral-h: 10;
    --sccx-neutral-c: 0.02;

    /* Light theme colors */
    --sccx-bg: oklch(0.98 0.01 var(--sccx-neutral-h));
    --sccx-surface: oklch(1 0 0);
    --sccx-text: oklch(0.25 0.03 var(--sccx-neutral-h));
    --sccx-text-muted: oklch(0.45 0.02 var(--sccx-neutral-h));
    --sccx-border: oklch(0.88 0.02 var(--sccx-neutral-h));
    --sccx-primary: oklch(var(--sccx-primary-l) var(--sccx-primary-c) var(--sccx-primary-h));
    --sccx-primary-hover: oklch(calc(var(--sccx-primary-l) - 0.08) var(--sccx-primary-c) var(--sccx-primary-h));
    --sccx-accent: oklch(var(--sccx-accent-l) var(--sccx-accent-c) var(--sccx-accent-h));
    --sccx-accent-hover: oklch(calc(var(--sccx-accent-l) - 0.08) var(--sccx-accent-c) var(--sccx-accent-h));

    /* Spacing Scale - Fluid */
    --sccx-space-3xs: clamp(0.25rem, 0.23rem + 0.11vw, 0.31rem);
    --sccx-space-2xs: clamp(0.5rem, 0.46rem + 0.22vw, 0.63rem);
    --sccx-space-xs: clamp(0.75rem, 0.68rem + 0.33vw, 0.94rem);
    --sccx-space-s: clamp(1rem, 0.91rem + 0.43vw, 1.25rem);
    --sccx-space-m: clamp(1.5rem, 1.37rem + 0.65vw, 1.88rem);
    --sccx-space-l: clamp(2rem, 1.83rem + 0.87vw, 2.5rem);
    --sccx-space-xl: clamp(3rem, 2.74rem + 1.3vw, 3.75rem);
    --sccx-space-2xl: clamp(4rem, 3.65rem + 1.74vw, 5rem);
    --sccx-space-3xl: clamp(6rem, 5.48rem + 2.61vw, 7.5rem);

    /* Typography Scale - Fluid */
    --sccx-text-xs: clamp(0.75rem, 0.71rem + 0.22vw, 0.88rem);
    --sccx-text-sm: clamp(0.875rem, 0.83rem + 0.24vw, 1rem);
    --sccx-text-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
    --sccx-text-lg: clamp(1.125rem, 1.07rem + 0.28vw, 1.313rem);
    --sccx-text-xl: clamp(1.25rem, 1.17rem + 0.43vw, 1.563rem);
    --sccx-text-2xl: clamp(1.5rem, 1.37rem + 0.65vw, 1.875rem);
    --sccx-text-3xl: clamp(1.875rem, 1.68rem + 0.98vw, 2.5rem);
    --sccx-text-4xl: clamp(2.25rem, 1.96rem + 1.52vw, 3.25rem);
    --sccx-text-5xl: clamp(3rem, 2.52rem + 2.39vw, 4.5rem);

    /* Line Heights */
    --sccx-leading-tight: 1.2;
    --sccx-leading-snug: 1.375;
    --sccx-leading-normal: 1.5;
    --sccx-leading-relaxed: 1.625;
    --sccx-leading-loose: 2;

    /* Font Weights */
    --sccx-weight-normal: 400;
    --sccx-weight-medium: 500;
    --sccx-weight-semibold: 600;
    --sccx-weight-bold: 700;

    /* Border Radius */
    --sccx-radius-sm: 0.25rem;
    --sccx-radius-md: 0.5rem;
    --sccx-radius-lg: 0.75rem;
    --sccx-radius-xl: 1rem;
    --sccx-radius-full: 9999px;

    /* Shadows */
    --sccx-shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.05);
    --sccx-shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.1);
    --sccx-shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.1);
    --sccx-shadow-xl: 0 20px 25px -5px oklch(0 0 0 / 0.1);

    /* Transitions */
    --sccx-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --sccx-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --sccx-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-index Scale */
    --sccx-z-base: 0;
    --sccx-z-dropdown: 1000;
    --sccx-z-sticky: 1100;
    --sccx-z-fixed: 1200;
    --sccx-z-modal: 1300;
    --sccx-z-popover: 1400;
    --sccx-z-tooltip: 1500;

    /* Container Widths */
    --sccx-container-sm: 640px;
    --sccx-container-md: 768px;
    --sccx-container-lg: 1024px;
    --sccx-container-xl: 1280px;
    --sccx-container-2xl: 1536px;

    color-scheme: light;
    accent-color: var(--sccx-primary);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --sccx-bg: oklch(0.18 0.02 var(--sccx-neutral-h));
      --sccx-surface: oklch(0.22 0.02 var(--sccx-neutral-h));
      --sccx-text: oklch(0.92 0.02 var(--sccx-neutral-h));
      --sccx-text-muted: oklch(0.65 0.02 var(--sccx-neutral-h));
      --sccx-border: oklch(0.35 0.02 var(--sccx-neutral-h));
      --sccx-primary: oklch(calc(var(--sccx-primary-l) + 0.15) var(--sccx-primary-c) var(--sccx-primary-h));
      --sccx-primary-hover: oklch(calc(var(--sccx-primary-l) + 0.22) var(--sccx-primary-c) var(--sccx-primary-h));
      --sccx-accent: oklch(calc(var(--sccx-accent-l) + 0.15) var(--sccx-accent-c) var(--sccx-accent-h));
      --sccx-accent-hover: oklch(calc(var(--sccx-accent-l) + 0.22) var(--sccx-accent-c) var(--sccx-accent-h));

      color-scheme: dark;
    }
  }
}