/* ============================================================================
   HANLHO.COM - Design Tokens
   ============================================================================
   Systematic design tokens for consistent theming across the site.
   
   Token Organization:
   1. Color Primitives - Raw color values
   2. Color Semantic - Meaningful color assignments
   3. Spacing - 4px-based scale
   4. Typography - Font sizes and weights
   5. Border Radius - Corner rounding values
   6. Shadows - Elevation and depth
   7. Transitions - Animation timing
   8. Component-specific - Tokens for specific components
   ========================================================================== */

/* ============================================================================
   1. COLOR PRIMITIVES
   ============================================================================
   Raw color values that don't change between themes.
   These should rarely be used directly in components.
   ========================================================================== */
:root {
    /* Burgundy Brand Colors */
    --color-burgundy-50: #fdf5f6;
    --color-burgundy-100: #f5e6e8;
    --color-burgundy-200: #edd0d4;
    --color-burgundy-300: #dcafb5;
    --color-burgundy-400: #c5828b;
    --color-burgundy-500: #a84d5a;
    --color-burgundy-600: #722f37;
    --color-burgundy-700: #5a252c;
    --color-burgundy-800: #4a1f24;
    --color-burgundy-900: #3e1b1f;

    /* Neutral Colors */
    --color-white: #ffffff;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #e5e5e5;
    --color-gray-300: #d4d4d4;
    --color-gray-400: #a3a3a3;
    --color-gray-500: #737373;
    --color-gray-600: #525252;
    --color-gray-700: #404040;
    --color-gray-800: #262626;
    --color-gray-900: #171717;
    --color-black: #000000;

    /* Ink Colors (for text hierarchy) */
    --color-ink-50: #f8fafc;
    --color-ink-100: #f1f5f9;
    --color-ink-200: #e2e8f0;
    --color-ink-300: #cbd5e1;
    --color-ink-400: #94a3b8;
    --color-ink-500: #64748b;
    --color-ink-600: #475569;
    --color-ink-700: #334155;
    --color-ink-800: #1e293b;
    --color-ink-900: #1f2937;

    /* Semantic Colors */
    --color-beige-warm: #f5f1e8;

    /* Code/Terminal Colors */
    --color-code-bg: #f8fafc;
    --color-code-border: #d7e0ea;
    --color-code-fg: #233042;
    --color-code-badge-bg: #edf2f7;
    --color-code-badge-border: #d2dbe6;
    --color-terminal-bg: #edf3f9;
    --color-terminal-border: #c8d5e4;
    --color-terminal-fg: #1f3348;
}

/* ============================================================================
   2. COLOR SEMANTIC (Light Mode - Default)
   ============================================================================
   Meaningful color assignments that map primitives to UI purposes.
   These change between light and dark themes.
   ========================================================================== */
:root {
    /* Brand Colors */
    --color-primary: var(--color-burgundy-600);
    --color-primary-hover: var(--color-burgundy-700);
    --color-primary-light: rgba(114, 47, 55, 0.08);
    --color-primary-bg: rgba(114, 47, 55, 0.05);
    --color-primary-bg-strong: rgba(114, 47, 55, 0.08);

    /* Surface Colors (Backgrounds) */
    --color-surface-base: var(--color-white);
    --color-surface-elevated: var(--color-gray-100);
    --color-surface-warm: var(--color-beige-warm);
    --color-surface-accent: var(--color-primary-bg);

    /* Text Colors */
    --color-text-primary: var(--color-black);
    --color-text-secondary: var(--color-gray-600);
    --color-text-tertiary: var(--color-ink-600);
    --color-text-inverse: var(--color-white);
    --color-text-brand: var(--color-burgundy-600);

    /* Border Colors */
    --color-border-default: var(--color-gray-200);
    --color-border-brand: var(--color-burgundy-600);

    /* Code Colors */
    --color-code-surface: var(--color-code-bg);
    --color-code-border-default: var(--color-code-border);
    --color-code-text: var(--color-code-fg);
    --color-code-badge-surface: var(--color-code-badge-bg);
    --color-code-badge-border-default: var(--color-code-badge-border);

    /* Terminal Colors */
    --color-terminal-surface: var(--color-terminal-bg);
    --color-terminal-border-default: var(--color-terminal-border);
    --color-terminal-text: var(--color-terminal-fg);
}

/* ============================================================================
   3. SPACING SCALE
   ============================================================================
   4px base unit with semantic naming for consistent spacing.
   ========================================================================== */
:root {
    /* Base Unit */
    --space-base: 4px;

    /* Numeric Scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 48px;
    --space-9: 64px;
    --space-10: 96px;
    --space-11: 128px;
    --space-12: 160px;
    --space-13: 192px;
    --space-14: 256px;

    /* Semantic Spacing */
    --space-xs: var(--space-1);
    --space-sm: var(--space-2);
    --space-md: var(--space-4);
    --space-lg: var(--space-6);
    --space-xl: var(--space-8);
    --space-2xl: var(--space-10);
    --space-3xl: var(--space-12);

    /* Component-specific */
    --header-height: 80px;
    --container-width: 1000px;
    --container-padding: 24px;
}

/* ============================================================================
   4. TYPOGRAPHY
   ============================================================================
   Font sizes using a type scale with clamp for responsiveness.
   ========================================================================== */
:root {
    /* Font Families */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Georgia", "Times New Roman", serif;
    --font-family-mono: "JetBrains Mono", "SF Mono", Monaco, "Cascadia Code", monospace;
    --font-family-meta: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* Font Sizes (Type Scale) */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 2rem;        /* 32px */
    --text-4xl: clamp(28px, 4vw, 36px);
    --text-5xl: clamp(52px, 8vw, 84px);

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

    /* Line Heights */
    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;
    --leading-loose: 1.75;

    /* Letter Spacing */
    --tracking-tight: -0.03em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;

    /* Code-specific Typography */
    --code-font-size: clamp(0.82rem, 0.08vw + 0.79rem, 0.86rem);
    --code-line-height: 1.56;
}

/* ============================================================================
   5. BORDER RADIUS
   ============================================================================
   Consistent corner rounding values.
   ========================================================================== */
:root {
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-full: 999px;
}

/* ============================================================================
   6. SHADOWS
   ============================================================================
   Elevation and depth shadows.
   ========================================================================== */
:root {
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* ============================================================================
   7. TRANSITIONS
   ============================================================================
   Animation timing functions and durations.
   ========================================================================== */
:root {
    /* Durations */
    --duration-fast: 0.15s;
    --duration-normal: 0.25s;
    --duration-slow: 0.3s;
    --duration-slower: 0.4s;

    /* Easing Functions */
    --ease-default: ease;
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);

    /* Common Transitions */
    --transition-colors: background-color var(--duration-slow) var(--ease-default), 
                         color var(--duration-slow) var(--ease-default), 
                         border-color var(--duration-slow) var(--ease-default);
    --transition-transform: transform var(--duration-normal) var(--ease-default);
    --transition-all: all var(--duration-normal) var(--ease-smooth);
}

/* ============================================================================
   8. COMPONENT-SPECIFIC TOKENS
   ============================================================================
   Tokens for specific reusable components.
   ========================================================================== */
:root {
    /* Social Links */
    --social-icon-size-footer: 18px;
    --social-text-size-footer: 15px;
    --social-icon-size-home: 20px;
    --social-gap-footer: 32px;

    /* Tags */
    --tag-padding-sm: 4px 10px;
    --tag-padding-md: 6px 14px;
    --tag-font-size-sm: 0.78rem;
    --tag-font-size-md: 0.88rem;

    /* Buttons */
    --btn-padding-default: var(--space-3) var(--space-5);
    --btn-padding-lg: 14px 24px;
    --btn-radius: var(--radius-sm);
    --btn-font-size: 14px;
    --btn-font-size-lg: 15px;

    /* Cards */
    --card-padding: var(--space-5);
    --card-radius-list: var(--radius-sm);
    --card-radius-card: var(--radius-xl);
    --card-border-color: var(--color-border-default);
}

/* ============================================================================
   DARK MODE - COLOR SEMANTIC OVERRIDES
   ============================================================================
   Burgundy-tinted dark palette - warm, crafted, readable.
   Only color values that differ from light mode are overridden.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Brand Colors (Adjusted for dark mode contrast) */
        --color-primary: var(--color-burgundy-500);
        --color-primary-hover: #c45a6a;
        --color-primary-light: rgba(168, 77, 90, 0.15);
        --color-primary-bg: rgba(168, 77, 90, 0.08);
        --color-primary-bg-strong: rgba(168, 77, 90, 0.12);

        /* Surface Colors */
        --color-surface-base: #0f1215;
        --color-surface-elevated: #161b22;
        --color-surface-warm: #1a1612;

        /* Text Colors */
        --color-text-primary: #e6edf3;
        --color-text-secondary: var(--color-gray-400);
        --color-text-tertiary: #8b949e;
        --color-text-brand: var(--color-burgundy-500);

        /* Border Colors */
        --color-border-default: #21262d;

        /* Code Colors */
        --color-code-surface: #0d1117;
        --color-code-border-default: #30363d;
        --color-code-text: #c9d1d9;
        --color-code-badge-surface: #21262d;
        --color-code-badge-border-default: #30363d;

        /* Terminal Colors */
        --color-terminal-surface: #0d1117;
        --color-terminal-border-default: #30363d;
        --color-terminal-text: #c9d1d9;
    }
}

/* Manual dark mode override via data attribute */
:root[data-theme="dark"] {
    /* Brand Colors */
    --color-primary: var(--color-burgundy-500);
    --color-primary-hover: #c45a6a;
    --color-primary-light: rgba(168, 77, 90, 0.15);
    --color-primary-bg: rgba(168, 77, 90, 0.08);
    --color-primary-bg-strong: rgba(168, 77, 90, 0.12);

    /* Surface Colors */
    --color-surface-base: #0f1215;
    --color-surface-elevated: #161b22;
    --color-surface-warm: #1a1612;

    /* Text Colors */
    --color-text-primary: #e6edf3;
    --color-text-secondary: var(--color-gray-400);
    --color-text-tertiary: #8b949e;
    --color-text-brand: var(--color-burgundy-500);

    /* Border Colors */
    --color-border-default: #21262d;

    /* Code Colors */
    --color-code-surface: #0d1117;
    --color-code-border-default: #30363d;
    --color-code-text: #c9d1d9;
    --color-code-badge-surface: #21262d;
    --color-code-badge-border-default: #30363d;

    /* Terminal Colors */
    --color-terminal-surface: #0d1117;
    --color-terminal-border-default: #30363d;
    --color-terminal-text: #c9d1d9;
}

/* Light mode override via data attribute */
:root[data-theme="light"] {
    /* Reset to light mode values */
    --color-primary: var(--color-burgundy-600);
    --color-primary-hover: var(--color-burgundy-700);
    --color-primary-light: rgba(114, 47, 55, 0.08);
    --color-primary-bg: rgba(114, 47, 55, 0.05);
    --color-primary-bg-strong: rgba(114, 47, 55, 0.08);

    --color-surface-base: var(--color-white);
    --color-surface-elevated: var(--color-gray-100);
    --color-surface-warm: var(--color-beige-warm);

    --color-text-primary: var(--color-black);
    --color-text-secondary: var(--color-gray-600);
    --color-text-tertiary: var(--color-ink-600);
    --color-text-brand: var(--color-burgundy-600);

    --color-border-default: var(--color-gray-200);

    --color-code-surface: var(--color-code-bg);
    --color-code-border-default: var(--color-code-border);
    --color-code-text: var(--color-code-fg);
    --color-code-badge-surface: var(--color-code-badge-bg);
    --color-code-badge-border-default: var(--color-code-badge-border);

    --color-terminal-surface: var(--color-terminal-bg);
    --color-terminal-border-default: var(--color-terminal-border);
    --color-terminal-text: var(--color-terminal-fg);
}