@import url('./brand-palette.css');
/*
* Design Tokens: Color & Font
* Figma: https://www.figma.com/file/17c0n0I4x22aI1X60a2u8s/Untitled?type=design&node-id=1-2&mode=design&t=A5aV3c31yHacVbmg-0
*/

/* Global smooth transitions for theme switching */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

:root {
    /* Color Scheme */
    --color-primary: var(--brand-action);
    --color-primary-dark: var(--brand-hover);
    --color-secondary: var(--brand-support);
    --color-background: #ffffff;
    --color-bg: rgb(245, 245, 245);
    --color-bg-alt: #F8F9FA;
    --color-surface: #F8F9FA;
    --color-text: #212529;
    --color-text-secondary: #495057;
    --color-text-muted: #6C757D;
    --color-border: #DEE2E6;
    --color-hover: #E9ECEF;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-100: #F8F9FA;
    --color-gray-200: #E9ECEF;
    --color-gray-300: #DEE2E6;
    --color-gray-400: #CED4DA;
    --color-gray-500: #ADB5BD;
    --color-gray-600: #6C757D;
    --color-gray-700: #495057;
    --color-gray-800: #343A40;
    --color-gray-900: #212529;

    /* Dark Theme */
    --dark-color-primary: var(--brand-action);
    --dark-color-primary-dark: var(--brand-hover);
    --dark-color-secondary: var(--brand-support);
    --dark-color-background: #121212;
    --dark-color-bg: #121212;
    --dark-color-bg-alt: #1E1E1E;
    --dark-color-surface: #1E1E1E;
    --dark-color-text: #E0E0E0;
    --dark-color-text-secondary: #BDBDBD;
    --dark-color-text-muted: #ffffff;
    --dark-color-border: #424242;
    --dark-color-hover: #2C2C2C;

    /* Font Styles */
    --font-family-base: 'Pretendard Variable', sans-serif;
    --font-size-base: 16px;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --line-height-base: 1.5;

    /* Black Theme Variables */
    --black-color-background: #000000;
    --black-color-bg: #000000;
    --black-color-bg-alt: #111111;
    --black-color-text: #FFFFFF;
    --black-color-text-secondary: #CCCCCC;
    --black-color-text-muted: #999999;
    --black-color-border: #333333;
    --black-color-hover: #1A1A1A;
}


[data-theme='dark'] {
    --color-primary: var(--dark-color-primary);
    --color-primary-dark: var(--dark-color-primary-dark);
    --color-secondary: var(--dark-color-secondary);
    --color-background: var(--dark-color-background);
    --color-bg: var(--dark-color-bg);
    --color-bg-alt: var(--dark-color-bg-alt);
    --color-surface: var(--dark-color-surface);
    --color-text: var(--dark-color-text);
    --color-text-secondary: var(--dark-color-text-secondary);
    --color-text-muted: var(--dark-color-text-muted);
    --color-border: var(--dark-color-border);
    --color-hover: var(--dark-color-hover);
}

[data-theme='black'] {
    --color-primary: var(--dark-color-primary);
    --color-primary-dark: var(--dark-color-primary-dark);
    --color-secondary: var(--dark-color-secondary);
    --color-background: var(--black-color-background);
    --color-bg: var(--black-color-bg);
    --color-bg-alt: var(--black-color-bg-alt);
    --color-surface: var(--black-color-bg);
    --color-text: var(--black-color-text);
    --color-text-secondary: var(--black-color-text-secondary);
    --color-text-muted: var(--black-color-text-muted);
    --color-border: var(--black-color-border);
    --color-hover: var(--black-color-hover);
}