/*
 * Cold UI Components Tokens
 * Theme: Cold Monochrome Edge for SaaS Applications
 * Perfect for: API businesses, dashboards, analytics platforms
 */

/* Cold theme variables - Applied when [data-theme-variant="cold"] */
[data-theme-variant="cold"] {
    /* === Generic Tokens (Unchanged) === */
    --font-family-sans:
        "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-mono:
        "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    --font-size-h1: 24px;
    --font-weight-h1: 600;
    --font-size-body: 15px;
    --font-weight-body: 400;
    --font-size-caption: 12px;
    --border-radius: 6px;
    --transition-speed: 0.15s ease-in-out;

    /* === Derived / compatibility tokens === (see warm-theme.css) */
    --border-radius-sm: calc(var(--border-radius) * 0.5);
    --border-radius-lg: calc(var(--border-radius) * 1.5);
    --font-size-base: var(--font-size-body);
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --color-text: var(--theme-text-primary);
    --theme-text-muted: var(--theme-text-tertiary);
    --theme-success: var(--color-success);
    --theme-info: var(--color-info);
    --theme-warning: var(--color-warning);
    --theme-error: var(--color-error);
    --theme-accent-alpha: color-mix(in srgb, var(--theme-accent) 12%, transparent);
    --theme-info-alpha: color-mix(in srgb, var(--color-info) 14%, transparent);
    --theme-success-alpha: color-mix(in srgb, var(--color-success) 14%, transparent);
    --theme-warning-alpha: color-mix(in srgb, var(--color-warning) 14%, transparent);
    --theme-error-alpha: color-mix(in srgb, var(--color-error) 14%, transparent);
    --color-error-alpha: var(--theme-error-alpha);

    /* Generic --color-* vocabulary mapped onto the canonical palette. */
    --color-surface: var(--theme-surface);
    --color-surface-hover: color-mix(in srgb, var(--theme-surface) 92%, var(--theme-text-primary));
    --color-background: var(--theme-background);
    --color-border: var(--theme-border);
    --color-primary: var(--theme-accent);
    --color-primary-contrast: var(--theme-accent-contrast);
    --color-primary-alpha: var(--theme-accent-alpha);
    --color-text-secondary: var(--theme-text-secondary);
    --theme-accent-light: color-mix(in srgb, var(--theme-accent) 45%, var(--theme-surface));
    --theme-accent-rgb: 107, 114, 128;

    /* === Cool Gray Color Scale === */
    --cool-100: #f7f8f9;
    --cool-200: #e5e7eb;
    --cool-300: #d1d5db;
    --cool-400: #9ca3af;
    --cool-500: #6b7280;
    --cool-600: #4b5563;
    --cool-700: #374151;
    --cool-800: #1f2937;
    --cool-900: #111827;

    /* === Light Mode (Cool Monochrome) === */
    --theme-bg: #f5f7f9;
    --theme-background: #f5f7f9;
    --theme-text-primary: #18181b;
    /* Darkened from #71717a (4.4:1, failed WCAG AA) to meet 4.5:1 on bg. */
    --theme-text-secondary: #5f636b;
    /* Tertiary: de-emphasised hint/icon text (UI ≥3:1). */
    --theme-text-tertiary: #767b84;
    --theme-text-emphasis: var(--cool-600);
    --theme-accent: #6b7280;
    --theme-accent-contrast: #ffffff;
    --theme-secondary: #9ca3af;
    --theme-secondary-contrast: #ffffff;
    --theme-border: #e4e4e7;
    --theme-surface: #ffffff;
    --theme-highlight: #475569;

    /* === Semantic status colors === */
    --color-success: #2f7d5b;
    --color-warning: #9a6a16;
    --color-error: #c0392b;
    --color-info: #2f6f9a;

    /* Shadow tokens */
    --theme-shadow-color: rgba(24, 24, 27, 0.08);
    --theme-shadow-sm: 0 1px 3px var(--theme-shadow-color);
    --theme-shadow-md: 0 4px 12px var(--theme-shadow-color);
    --theme-shadow-lg: 0 8px 24px var(--theme-shadow-color);
    --theme-shadow-xl: 0 10px 40px var(--theme-shadow-color);

    /* Landscape colored mode - Cold Light */
    --landscape-wave-color: #6b8fa8;
    --landscape-mountain-color: #7a8088;
    --landscape-forest-color: #5d7a68;
    --landscape-desert-color: #a89a82;
}

[data-theme-variant="cold"][data-theme="dark"] {
    /* === Dark Mode (Cool Monochrome) === */
    --theme-bg: #161a1f;
    --theme-background: #161a1f;
    --theme-text-primary: rgba(255, 255, 255, 0.95);
    --theme-text-secondary: #b1b1ba;
    --theme-text-tertiary: #8b929c;
    --theme-text-emphasis: var(--cool-400);
    --theme-accent: #9ca3af;
    --theme-accent-rgb: 156, 163, 175;
    --theme-accent-contrast: #18181b;
    --theme-secondary: #6b7280;
    --theme-secondary-contrast: #ffffff;
    --theme-border: #3a3a3f;
    --theme-surface: #1e2329;
    --theme-highlight: #64748b;

    /* === Semantic status colors (dark) === */
    --color-success: #4ade80;
    --color-warning: #e0b250;
    --color-error: #f1736b;
    --color-info: #6bb5e0;

    /* Shadow tokens (dark mode) */
    --theme-shadow-color: rgba(0, 0, 0, 0.45);
    --theme-shadow-sm: 0 1px 3px var(--theme-shadow-color);
    --theme-shadow-md: 0 4px 12px var(--theme-shadow-color);
    --theme-shadow-lg: 0 8px 24px var(--theme-shadow-color);
    --theme-shadow-xl: 0 10px 40px var(--theme-shadow-color);

    /* Landscape colored mode - Cold Dark */
    --landscape-wave-color: #4a6a7a;
    --landscape-mountain-color: #5a5f68;
    --landscape-forest-color: #3d5a48;
    --landscape-desert-color: #7a6a52;
}