/**
 * Handfish Design System - Design Tokens
 *
 * Core design tokens for colors, typography, spacing, and effects.
 * These tokens provide the foundation for consistent visual design.
 *
 * Token naming convention:
 * --hf-{category}-{name}
 *
 * Categories:
 * - color: Base palette colors (1-7)
 * - accent: Accent/highlight colors (1-4)
 * - font: Font families
 * - size: Font sizes
 * - weight: Font weights
 * - spacing: Spacing scale
 * - radius: Border radii
 * - shadow: Box shadows
 * - glass: Glassmorphism effects
 * - ui: UI-specific tokens
 */

/* ============================================================================
 * Light/Dark Mode Colors
 * ============================================================================ */

:root {
    /* Dark mode colors (default)
     * Neutral scale: unified hue 264°, chroma tapers at extremes
     * Accents use same hue with higher chroma for color pop */
    --hf-color-1: oklch(13.9% 0.010 264);
    --hf-color-2: oklch(19.8% 0.027 264);
    --hf-color-3: oklch(26.5% 0.045 264);
    --hf-color-4: oklch(31.8% 0.056 264);
    --hf-color-5: oklch(72.8% 0.051 264);
    --hf-color-6: oklch(87.0% 0.038 264);
    --hf-color-7: oklch(98.0% 0.010 264);

    /* Accent colors — same hue, higher chroma */
    --hf-accent-1: oklch(22.2% 0.038 264);
    --hf-accent-2: oklch(28.2% 0.050 264);
    --hf-accent-3: oklch(79.5% 0.103 264);
    --hf-accent-4: oklch(92.5% 0.036 264);

    /* Semantic colors */
    --hf-red: oklch(69.3% 0.199 18);
    --hf-green: oklch(79.2% 0.198 145);
    --hf-yellow: oklch(89.1% 0.133 89);
    --hf-blue: oklch(61.1% 0.153 260);

    /* Computed colors */
    --hf-border: color-mix(in srgb, var(--hf-accent-3) 25%, transparent 75%);
    --hf-border-hover: color-mix(in srgb, var(--hf-accent-3) 40%, transparent 60%);
    --hf-border-focus: var(--hf-accent-3);

    /* Semantic Color Tokens
     * Readable aliases for the numbered primitives.
     * Defined once here — they auto-resolve when primitives change per theme.
     */

    /* Backgrounds */
    --hf-bg-base:     var(--hf-color-1);
    --hf-bg-surface:  var(--hf-color-2);
    --hf-bg-elevated: var(--hf-color-3);
    --hf-bg-muted:    var(--hf-color-4);
    --hf-titlebar-bg: var(--hf-color-3);

    /* Text */
    --hf-text-muted:  var(--hf-color-4);
    --hf-text-dim:    var(--hf-color-5);
    --hf-text-normal: var(--hf-color-6);
    --hf-text-bright: var(--hf-color-7);

    /* Borders */
    --hf-border-subtle: var(--hf-color-4);

    /* Accent */
    --hf-accent-bg:    var(--hf-accent-1);
    --hf-accent:       var(--hf-accent-3);
    --hf-accent-hover: var(--hf-accent-4);
}

/* Light mode override
 * Scale: brightest → darkest, unified hue 90° */
@media (prefers-color-scheme: light) {
    :root {
        --hf-color-1: oklch(97.6% 0.007 90);
        --hf-color-2: oklch(92.7% 0.020 90);
        --hf-color-3: oklch(87.0% 0.026 90);
        --hf-color-4: oklch(79.7% 0.047 90);
        --hf-color-5: oklch(52.1% 0.055 90);
        --hf-color-6: oklch(27.0% 0.030 90);
        --hf-color-7: oklch(18.8% 0.022 90);

        --hf-accent-1: oklch(94.4% 0.025 90);
        --hf-accent-2: oklch(85.4% 0.070 90);
        --hf-accent-3: oklch(40.6% 0.073 90);
        --hf-accent-4: oklch(26.1% 0.046 90);

        --hf-red: oklch(45.5% 0.170 20);
        --hf-green: oklch(46.5% 0.116 151);
        --hf-yellow: oklch(76.4% 0.155 85);
        --hf-blue: oklch(42.5% 0.150 260);
    }
}

/* Manual theme overrides */
[data-theme="dark"] {
    --hf-color-1: oklch(13.9% 0.010 264);
    --hf-color-2: oklch(19.8% 0.027 264);
    --hf-color-3: oklch(26.5% 0.045 264);
    --hf-color-4: oklch(31.8% 0.056 264);
    --hf-color-5: oklch(72.8% 0.051 264);
    --hf-color-6: oklch(87.0% 0.038 264);
    --hf-color-7: oklch(98.0% 0.010 264);
    --hf-accent-1: oklch(22.2% 0.038 264);
    --hf-accent-2: oklch(28.2% 0.050 264);
    --hf-accent-3: oklch(79.5% 0.103 264);
    --hf-accent-4: oklch(92.5% 0.036 264);
    --hf-red: oklch(69.3% 0.199 18);
    --hf-green: oklch(79.2% 0.198 145);
    --hf-yellow: oklch(89.1% 0.133 89);
    --hf-blue: oklch(61.1% 0.153 260);
}

[data-theme="light"] {
    --hf-color-1: oklch(97.6% 0.007 90);
    --hf-color-2: oklch(92.7% 0.020 90);
    --hf-color-3: oklch(87.0% 0.026 90);
    --hf-color-4: oklch(79.7% 0.047 90);
    --hf-color-5: oklch(52.1% 0.055 90);
    --hf-color-6: oklch(27.0% 0.030 90);
    --hf-color-7: oklch(18.8% 0.022 90);
    --hf-accent-1: oklch(94.4% 0.025 90);
    --hf-accent-2: oklch(85.4% 0.070 90);
    --hf-accent-3: oklch(40.6% 0.073 90);
    --hf-accent-4: oklch(26.1% 0.046 90);
    --hf-red: oklch(45.5% 0.170 20);
    --hf-green: oklch(46.5% 0.116 151);
    --hf-yellow: oklch(76.4% 0.155 85);
    --hf-blue: oklch(42.5% 0.150 260);
}

/* ============================================================================
 * Typography
 * ============================================================================ */

:root {
    /* Font families */
    --hf-font-family: Nunito, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --hf-font-family-mono: 'Noto Sans Mono', 'SF Mono', Monaco, Consolas, monospace;
    --hf-font-family-icon: 'Material Symbols Outlined';

    /* Font sizes */
    --hf-size-xs: 0.625rem;   /* 10px */
    --hf-size-sm: 0.75rem;    /* 12px */
    --hf-size-base: 0.875rem; /* 14px */
    --hf-size-md: 1rem;       /* 16px */
    --hf-size-lg: 1.125rem;   /* 18px */
    --hf-size-xl: 1.25rem;    /* 20px */
    --hf-size-2xl: 1.5rem;    /* 24px */

    /* Font weights */
    --hf-weight-normal: 400;
    --hf-weight-medium: 500;
    --hf-weight-semibold: 600;
    --hf-weight-bold: 700;

    /* Line heights */
    --hf-leading-tight: 1.2;
    --hf-leading-normal: 1.5;
    --hf-leading-relaxed: 1.75;

    /* Letter spacing */
    --hf-tracking-tight: -0.025em;
    --hf-tracking-normal: 0;
    --hf-tracking-wide: 0.05em;
}

/* ============================================================================
 * Spacing Scale
 * ============================================================================ */

:root {
    --hf-space-0: 0;
    --hf-space-1: 0.25rem;  /* 4px */
    --hf-space-2: 0.5rem;   /* 8px */
    --hf-space-3: 0.75rem;  /* 12px */
    --hf-space-4: 1rem;     /* 16px */
    --hf-space-5: 1.25rem;  /* 20px */
    --hf-space-6: 1.5rem;   /* 24px */
    --hf-space-8: 2rem;     /* 32px */
    --hf-space-10: 2.5rem;  /* 40px */
    --hf-space-12: 3rem;    /* 48px */
}

/* ============================================================================
 * Border Radii
 * ============================================================================ */

:root {
    --hf-radius-none: 0;
    --hf-radius-sm: 0.25rem;   /* 4px */
    --hf-radius: 0.5rem;       /* 8px */
    --hf-radius-md: 0.375rem;  /* 6px */
    --hf-radius-lg: 0.75rem;   /* 12px */
    --hf-radius-xl: 1rem;      /* 16px */
    --hf-radius-pill: 999px;
    --hf-radius-full: 50%;
}

/* ============================================================================
 * Shadows
 * ============================================================================ */

:root {
    --hf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --hf-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    --hf-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.2);
    --hf-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.25);
    --hf-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.3);

    /* Glow shadows for accents */
    --hf-glow-accent: 0 0 12px color-mix(in srgb, var(--hf-accent-3) 40%, transparent 60%);
}

/* ============================================================================
 * Glassmorphism Effects
 * ============================================================================ */

:root {
    /* Surface opacity levels */
    --hf-surface-opacity: 92%;
    --hf-surface-transparency: 8%;
    --hf-panel-opacity: 85%;
    --hf-panel-transparency: 15%;
    --hf-header-opacity: 65%;
    --hf-header-transparency: 35%;

    /* Blur strength */
    --hf-glass-blur: blur(20px);
    --hf-glass-blur-sm: blur(8px);
    --hf-glass-blur-lg: blur(32px);

    /* Backdrop overlay */
    --hf-backdrop: rgba(0, 0, 0, 0.6);

}

/* Opaque mode — disables glassmorphism transparency.
   Double attribute selector for specificity over theme selectors. */
[data-opaque][data-opaque] {
    --hf-surface-opacity: 100%;
    --hf-surface-transparency: 0%;
    --hf-panel-opacity: 100%;
    --hf-panel-transparency: 0%;
    --hf-header-opacity: 100%;
    --hf-header-transparency: 0%;
    --hf-glass-blur: none;
    --hf-glass-blur-sm: none;
    --hf-glass-blur-lg: none;
}

:root {
    /* Chrome highlight/shadow for 3D effect */
    --hf-chrome-highlight-blend: 86%;
    --hf-chrome-highlight-tint: 14%;
    --hf-chrome-shadow-blend: 72%;
    --hf-chrome-shadow-shade: 28%;
}

/* ============================================================================
 * Transitions
 * ============================================================================ */

:root {
    --hf-transition-fast: 0.1s ease;
    --hf-transition: 0.15s ease;
    --hf-transition-slow: 0.3s ease;

    /* Specific transitions */
    --hf-transition-color: color 0.15s ease;
    --hf-transition-bg: background-color 0.15s ease;
    --hf-transition-border: border-color 0.15s ease;
    --hf-transition-opacity: opacity 0.15s ease;
    --hf-transition-transform: transform 0.15s ease;
}

/* ============================================================================
 * Z-Index Scale
 * ============================================================================ */

:root {
    --hf-z-base: 0;
    --hf-z-dropdown: 100;
    --hf-z-sticky: 200;
    --hf-z-fixed: 300;
    --hf-z-modal-backdrop: 400;
    --hf-z-modal: 500;
    --hf-z-popover: 600;
    --hf-z-tooltip: 700;
}

/* ============================================================================
 * Control Heights
 * ============================================================================ */

:root {
    --hf-control-height-sm: 1.5rem;  /* 24px */
    --hf-control-height: 1.875rem;   /* 30px */
    --hf-control-height-lg: 2.25rem; /* 36px */
    --hf-control-padding: 0.25rem 0.5rem; /* 4px 8px */
    --hf-titlebar-height: 2.25rem;   /* 36px */
}