/*
 * Warm UI Components Tokens
 * Theme: Warm Monochrome Edge for Content Management
 * Perfect for: Blog publishing, content creation, documentation
 */

/* Warm theme variables - Applied when [data-theme-variant="warm"] */
[data-theme-variant="warm"] {
    /* === 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: 28px;
    --font-weight-h1: 700;
    --font-size-body: 16px;
    --font-weight-body: 400;
    --font-size-caption: 14px;
    --border-radius: 8px;
    --transition-speed: 0.2s ease-in-out;

    /* === Derived / compatibility tokens ===
       Aliases consumed across components (editor, math, callouts, blog) that
       previously resolved to `initial` and silently broke styling. */
    --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);

    /* Map the generic --color-* vocabulary used by some component/editor
       stylesheets onto the canonical theme palette (no new colours). */
    --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: 138, 135, 132;

    /* === Warm gray Color Scale === */
    --warm-100: #f8f7f6;
    --warm-200: #edebe9;
    --warm-300: #dcd9d6;
    --warm-400: #b8b4b0;
    --warm-500: #94908c;
    --warm-600: #706c68;
    --warm-700: #4c4844;
    --warm-800: #302d2a;
    --warm-900: #1c1a18;

    /* Accent colors */
    --color-wine: #4a3636;
    --color-olive: #7a7d6e;

    /* === Light Mode === */
    --theme-bg: #f7f6f5;
    --theme-background: #f7f6f5;
    --theme-text-primary: #1c1a18;
    --theme-text-secondary: #5c5956;
    /* Tertiary: de-emphasised hint/icon text (UI ≥3:1). */
    --theme-text-tertiary: #837f7b;
    --theme-text-emphasis: var(--warm-600);
    --theme-accent: #8a8784;
    --theme-accent-contrast: #ffffff;
    --theme-secondary: #a8a5a2;
    --theme-secondary-contrast: #ffffff;
    --theme-border: #e5e3e1;
    --theme-surface: #ffffff;
    --theme-highlight: #7a6a6a;

    /* === Semantic status colors === */
    --color-success: #2f7d5b;
    --color-warning: #9a6a16;
    --color-error: #b23a2e;
    --color-info: #3a6a8a;

    /* Shadow tokens */
    --theme-shadow-color: rgba(28, 26, 24, 0.12);
    --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 - Warm Light */
    --landscape-wave-color: #7ba3b8;
    --landscape-mountain-color: #8a8175;
    --landscape-forest-color: #6b7d5c;
    --landscape-desert-color: #b89a7a;
}

[data-theme-variant="warm"][data-theme="dark"] {
    /* === Dark Mode === */
    --theme-bg: #1b1a19;
    --theme-background: #1b1a19;
    --theme-text-primary: rgba(255, 255, 255, 0.92);
    --theme-text-secondary: #a8a5a2;
    --theme-text-tertiary: #8a8682;
    --theme-text-emphasis: var(--warm-400);
    --theme-accent: #4a4846;
    --theme-accent-rgb: 74, 72, 70;
    --theme-accent-contrast: rgba(255, 255, 255, 0.92);
    --theme-secondary: #5c5956;
    --theme-secondary-contrast: rgba(255, 255, 255, 0.92);
    --theme-border: #323130;
    --theme-surface: #232221;
    --theme-highlight: #6b6866;

    /* === 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.35);
    --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 - Warm Dark */
    --landscape-wave-color: #5a7a8a;
    --landscape-mountain-color: #6a6058;
    --landscape-forest-color: #4a5a3c;
    --landscape-desert-color: #8a724a;
}