@charset "utf-8";

@layer tokens {
    /* ==================================================================
     * 1. COLOR SYSTEM (OKLCH with Fallbacks)
     * ================================================================== */
    :root {
        /* [CORE] 브랜드 및 기준 색상 */
        --color-primary: #006a68;
        --color-secondary: #ff6000;
        --color-tertiary: #ffb400;
        --color-cheesecake: #fffcda;
        --color-white: #ffffff;
        --color-black: #001514;

        /* [STATUS] 시스템 상태 원천 색상 */
        /* Fallback format for Safari stability */
        --status-error: #db3a34; /* Approximate Hex fallback */
        --status-error: oklch(0.6 0.2 25);
        
        --status-warning: #fbc02d; /* Approximate Hex fallback */
        --status-warning: oklch(0.75 0.15 75);
        
        --status-success: #388e3c; /* Approximate Hex fallback */
        --status-success: oklch(0.65 0.18 145);
        
        --status-info: #1976d2; /* Approximate Hex fallback */
        --status-info: oklch(0.65 0.15 240);

        /* [LIGHTNESS] */
        --lightness-100: 0.97;
        --lightness-200: 0.922;
        --lightness-300: 0.792;
        --lightness-400: 0.683;
        --lightness-500: 0.45;
        --lightness-600: 0.385;
        --lightness-700: 0.32;
        --lightness-800: 0.25;
        --lightness-900: 0.177;

        /* [PRIMARY PALETTE] 
        */
        --color-primary-100: #e0f2f1; /* Fallback */
        --color-primary-100: oklch(from var(--color-primary) var(--lightness-100) c h);
        
        --color-primary-200: #b2dfdb; /* Fallback */
        --color-primary-200: oklch(from var(--color-primary) var(--lightness-200) c h);
        
        --color-primary-300: #80cbc4; /* Fallback */
        --color-primary-300: oklch(from var(--color-primary) var(--lightness-300) c h);
        
        --color-primary-400: #4db6ac; /* Fallback */
        --color-primary-400: oklch(from var(--color-primary) var(--lightness-400) c h);
        
        --color-primary-500: #26a69a; /* Fallback */
        --color-primary-500: oklch(from var(--color-primary) var(--lightness-500) c h);
        
        --color-primary-600: #00897b; /* Fallback */
        --color-primary-600: oklch(from var(--color-primary) var(--lightness-600) c h);
        
        --color-primary-700: #00796b; /* Fallback */
        --color-primary-700: oklch(from var(--color-primary) var(--lightness-700) c h);
        
        --color-primary-800: #00695c; /* Fallback */
        --color-primary-800: oklch(from var(--color-primary) var(--lightness-800) c h);
        
        --color-primary-900: #004d40; /* Fallback */
        --color-primary-900: oklch(from var(--color-primary) var(--lightness-900) c h);

        /* [SECONDARY PALETTE] */
        --color-secondary-100: #ffe0b2;
        --color-secondary-100: oklch(from var(--color-secondary) var(--lightness-100) c h);
        --color-secondary-200: #ffcc80;
        --color-secondary-200: oklch(from var(--color-secondary) var(--lightness-200) c h);
        --color-secondary-300: #ffb74d;
        --color-secondary-300: oklch(from var(--color-secondary) var(--lightness-300) c h);
        --color-secondary-400: #ffa726;
        --color-secondary-400: oklch(from var(--color-secondary) var(--lightness-400) c h);
        --color-secondary-500: #ff9800;
        --color-secondary-500: oklch(from var(--color-secondary) var(--lightness-500) c h);
        --color-secondary-600: #fb8c00;
        --color-secondary-600: oklch(from var(--color-secondary) var(--lightness-600) c h);
        --color-secondary-700: #f57c00;
        --color-secondary-700: oklch(from var(--color-secondary) var(--lightness-700) c h);
        --color-secondary-800: #ef6c00;
        --color-secondary-800: oklch(from var(--color-secondary) var(--lightness-800) c h);
        --color-secondary-900: #e65100;
        --color-secondary-900: oklch(from var(--color-secondary) var(--lightness-900) c h);

        /* [TERTIARY PALETTE] */
        --color-tertiary-100: #fff8e1;
        --color-tertiary-100: oklch(from var(--color-tertiary) var(--lightness-100) c h);
        --color-tertiary-200: #ffecb3;
        --color-tertiary-200: oklch(from var(--color-tertiary) var(--lightness-200) c h);
        --color-tertiary-300: #ffe082;
        --color-tertiary-300: oklch(from var(--color-tertiary) var(--lightness-300) c h);
        --color-tertiary-400: #ffd54f;
        --color-tertiary-400: oklch(from var(--color-tertiary) var(--lightness-400) c h);
        --color-tertiary-500: #ffca28;
        --color-tertiary-500: oklch(from var(--color-tertiary) var(--lightness-500) c h);
        --color-tertiary-600: #ffc107;
        --color-tertiary-600: oklch(from var(--color-tertiary) var(--lightness-600) c h);
        --color-tertiary-700: #ffb300;
        --color-tertiary-700: oklch(from var(--color-tertiary) var(--lightness-700) c h);
        --color-tertiary-800: #ffa000;
        --color-tertiary-800: oklch(from var(--color-tertiary) var(--lightness-800) c h);
        --color-tertiary-900: #ff8f00;
        --color-tertiary-900: oklch(from var(--color-tertiary) var(--lightness-900) c h);

        /* [NEUTRAL PALETTE] */
        --color-neutral-100: #f5f5f5;
        --color-neutral-100: oklch(var(--lightness-100) 0 0);
        --color-neutral-200: #eeeeee;
        --color-neutral-200: oklch(var(--lightness-200) 0 0);
        --color-neutral-300: #e0e0e0;
        --color-neutral-300: oklch(var(--lightness-300) 0 0);
        --color-neutral-400: #bdbdbd;
        --color-neutral-400: oklch(var(--lightness-400) 0 0);
        --color-neutral-500: #9e9e9e;
        --color-neutral-500: oklch(var(--lightness-500) 0 0);
        --color-neutral-600: #757575;
        --color-neutral-600: oklch(var(--lightness-600) 0 0);
        --color-neutral-700: #616161;
        --color-neutral-700: oklch(var(--lightness-700) 0 0);
        --color-neutral-800: #424242;
        --color-neutral-800: oklch(var(--lightness-800) 0 0);
        --color-neutral-900: #212121;
        --color-neutral-900: oklch(var(--lightness-900) 0 0);

        /* [STATUS PALETTE] */
        --status-error-100: #ffebee; --status-error-100: oklch(from var(--status-error) var(--lightness-100) c h);
        --status-error-500: #f44336; --status-error-500: oklch(from var(--status-error) var(--lightness-500) c h);
        --status-error-900: #b71c1c; --status-error-900: oklch(from var(--status-error) var(--lightness-900) c h);

        --status-warning-100: #fffde7; --status-warning-100: oklch(from var(--status-warning) var(--lightness-100) c h);
        --status-warning-500: #ffeb3b; --status-warning-500: oklch(from var(--status-warning) var(--lightness-500) c h);
        --status-warning-900: #f57f17; --status-warning-900: oklch(from var(--status-warning) var(--lightness-900) c h);

        --status-success-100: #e8f5e9; --status-success-100: oklch(from var(--status-success) var(--lightness-100) c h);
        --status-success-500: #4caf50; --status-success-500: oklch(from var(--status-success) var(--lightness-500) c h);
        --status-success-900: #1b5e20; --status-success-900: oklch(from var(--status-success) var(--lightness-900) c h);

        --status-info-100: #e3f2fd; --status-info-100: oklch(from var(--status-info) var(--lightness-100) c h);
        --status-info-500: #2196f3; --status-info-500: oklch(from var(--status-info) var(--lightness-500) c h);
        --status-info-900: #0d47a1; --status-info-900: oklch(from var(--status-info) var(--lightness-900) c h);
    }

    /* ==================================================================
     * 2. TYPOGRAPHY (Fix: Media Query Range)
     * ================================================================== */
    :root {
        --font-family-pretendard: "Pretendard Variable", "Pretendard", sans-serif;
        --font-family-gmarket: "GmarketSans", var(--font-family-pretendard);
        --font-family-hanamdaume: "Hanamdaume", var(--font-family-pretendard);
        --font-family-poppins: "Poppins", var(--font-family-pretendard);
        --font-family-inkLipquid: "InkLipquid", var(--font-family-pretendard);
        --font-family-sans-serif: var(--font-family-pretendard);

        --line-height-latin: 1.5;
        --line-height-hangeul: 1.5;

        --letter-spacing-negative-10: -0.01em;
        --letter-spacing-negative-20: -0.02em;
        --letter-spacing-negative-25: -0.025em;
        --letter-spacing-negative-50: -0.05em;
        --letter-spacing-negative-60: -0.05em;
        --letter-spacing-zero: 0;

        --font-weight-100: 100;
        --font-weight-200: 200;
        --font-weight-300: 300;
        --font-weight-400: 400;
        --font-weight-500: 500;
        --font-weight-600: 600;
        --font-weight-700: 700;
        --font-weight-800: 800;
        --font-weight-900: 900;

        --font-display-1-max: 60px; --font-display-1-min: 44px;
        --font-display-2-max: 44px; --font-display-2-min: 32px;
        --font-display-3-max: 36px; --font-display-3-min: 28px;

        --font-heading-1-max: 40px; --font-heading-1-min: 28px;
        --font-heading-2-max: 32px; --font-heading-2-min: 24px;
        --font-heading-3-max: 24px; --font-heading-3-min: 22px;
        --font-heading-4-max: 20px; --font-heading-4-min: 20px;
        --font-heading-5-max: 18px; --font-heading-5-min: 18px;
        --font-heading-6-max: 16px; --font-heading-6-min: 16px;

        --font-body-1-max: 20px; --font-body-1-min: 20px;
        --font-body-2-max: 18px; --font-body-2-min: 18px;
        --font-body-3-max: 16px; --font-body-3-min: 16px;
        --font-body-4-max: 14px; --font-body-4-min: 14px;
    }

    /* Convert (min-width/max-width) */
    @media (min-width: 1280px) {
        :root {
            --font-display-1: var(--font-weight-700) var(--font-display-1-max) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-display-2: var(--font-weight-700) var(--font-display-2-max) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-display-3: var(--font-weight-700) var(--font-display-3-max) / var(--line-height-hangeul) var(--font-family-sans-serif);

            --font-heading-1: var(--font-weight-700) var(--font-heading-1-max) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-heading-2: var(--font-weight-700) var(--font-heading-2-max) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-heading-3: var(--font-weight-700) var(--font-heading-3-max) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-heading-4: var(--font-weight-700) var(--font-heading-4-max) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-heading-5: var(--font-weight-700) var(--font-heading-5-max) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-heading-6: var(--font-weight-700) var(--font-heading-6-max) / var(--line-height-hangeul) var(--font-family-sans-serif);

            --font-body-1: var(--font-body-1-max) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-body-2: var(--font-body-2-max) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-body-3: var(--font-body-3-max) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-body-4: var(--font-body-4-max) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-body-1-bold: var(--font-weight-700) var(--font-body-1-max) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-body-2-bold: var(--font-weight-700) var(--font-body-2-max) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-body-3-bold: var(--font-weight-700) var(--font-body-3-max) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-body-4-bold: var(--font-weight-700) var(--font-body-4-max) / var(--line-height-hangeul) var(--font-family-sans-serif);
        }
    }
    @media (max-width: 1279.98px) {
        :root {
            --font-display-1: var(--font-weight-700) var(--font-display-1-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-display-2: var(--font-weight-700) var(--font-display-2-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-display-3: var(--font-weight-700) var(--font-display-3-min) / var(--line-height-hangeul) var(--font-family-sans-serif);

            --font-heading-1: var(--font-weight-700) var(--font-heading-1-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-heading-2: var(--font-weight-700) var(--font-heading-2-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-heading-3: var(--font-weight-700) var(--font-heading-3-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-heading-4: var(--font-weight-700) var(--font-heading-4-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-heading-5: var(--font-weight-700) var(--font-heading-5-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-heading-6: var(--font-weight-700) var(--font-heading-6-min) / var(--line-height-hangeul) var(--font-family-sans-serif);

            --font-body-1: var(--font-body-1-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-body-2: var(--font-body-2-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-body-3: var(--font-body-3-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-body-4: var(--font-body-4-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-body-1-bold: var(--font-weight-700) var(--font-body-1-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-body-2-bold: var(--font-weight-700) var(--font-body-2-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-body-3-bold: var(--font-weight-700) var(--font-body-3-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
            --font-body-4-bold: var(--font-weight-700) var(--font-body-4-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
        }
    }

    /* ==================================================================
     * 3. GRID & LAYOUT (Fix: Media Query Range)
     * ================================================================== */
    :root {
        --grid-width-base: 1500;
        --grid-width-narrow: 1200;
        --grid-width-wide: 1720;
        --grid-width-scale: 0.92;

        --grid-margin: calc((100vw - min(var(--grid-width-scale) * 100vw, var(--grid-width-base) * 1px)) / 2);
        --grid-margin-negative: calc(var(--grid-margin) * -1);

        --grid-columns-pc: 12;
        --grid-columns-tab: 12;
        --grid-columns-mob: 4;

        --grid-gutter-pc: 24px;
        --grid-gutter-tab: 16px;
        --grid-gutter-mob: 16px;
    }

    @media (min-width: 1280px) {
        :root {
            --grid-columns: var(--grid-columns-pc);
            --grid-gutter: var(--grid-gutter-pc);
        }
    }
    @media (min-width: 768px) and (max-width: 1279.98px) {
        :root {
            --grid-columns: var(--grid-columns-tab);
            --grid-gutter: var(--grid-gutter-tab);
        }
    }
    @media (max-width: 767.98px) {
        :root {
            --grid-columns: var(--grid-columns-mob);
            --grid-gutter: var(--grid-gutter-mob);
        }
    }

    /* ==================================================================
     * 4. SPACING & NUMERIC SCALE
     * ================================================================== */
    :root {
        --spacing-base: 8px;
        --spacing-0: 0;
        --spacing-01: 1px;
        --spacing-02: 2px;
        --spacing-03: 4px;
        --spacing-04: 6px;
        --spacing-05: 8px;
        --spacing-06: 10px;
        --spacing-07: 12px;
        --spacing-08: 16px;
        --spacing-09: 20px;
        --spacing-10: 24px;
        --spacing-11: 28px;
        --spacing-12: 32px;
        --spacing-13: 36px;
        --spacing-14: 40px;
        --spacing-15: 44px;
        --spacing-16: 48px;
        --spacing-17: 56px;
        --spacing-18: 64px;
        --spacing-19: 72px;
        --spacing-20: 80px;
        --spacing-21: 96px;
    }

    /* ==================================================================
     * 5. SHAPE SYSTEM (RADIUS & BORDER) (Fix: Fallback for shadow)
     * ================================================================== */
    :root {
        --radius-0: 0;
        --radius-1: 2px;
        --radius-2: 4px;
        --radius-3: 6px;
        --radius-4: 10px;
        --radius-5: 16px;
        --radius-6: 20px;
        --radius-full: 9999px;
        --radius-circle: 50%;

        --border-width-0: 0;
        --border-width-1: 1px;
        --border-width-2: 2px;
        --border-width-3: 3px;

        --shadow-0: 0;
        
        --shadow-1: 0 0 40px rgba(0, 0, 0, 0.1); 
        --shadow-1: 0 0 40px oklch(0% 0 0 / 0.1);
        
        --shadow-2: 10px 0 40px rgba(0, 0, 0, 0.2);
        --shadow-2: 10px 0 40px oklch(0% 0 0 / 0.2);
        
        --shadow-3: 0 0 80px rgba(0, 0, 0, 0.3);
        --shadow-3: 0 0 80px oklch(0% 0 0 / 0.3);
    }
}