/* Projects Main Design System - OKLCH Edition */

/* Load from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');

:root {

    --logo-url: url("assets/imgs/logo-dark.png");

    --font-primary: 'Plus Jakarta Sans', sans-serif;
    --font-secondary: 'Plus Jakarta Sans', sans-serif;

    /* ========================================
       PRIMARY COLOR + Dynamic Variants
       ======================================== */
    --primary: oklch(0.62 0.18 142); /* gets written by theme-style */
    /* Opacity variants (dynamic via color-mix) */
    --primary-5: color-mix(in oklch, var(--primary) 5%, transparent);
    --primary-10: color-mix(in oklch, var(--primary) 10%, transparent);
    --primary-20: color-mix(in oklch, var(--primary) 20%, transparent);
    --primary-30: color-mix(in oklch, var(--primary) 30%, transparent);
    --primary-40: color-mix(in oklch, var(--primary) 40%, transparent);
    --primary-50: color-mix(in oklch, var(--primary) 50%, transparent);
    --primary-60: color-mix(in oklch, var(--primary) 60%, transparent);
    --primary-70: color-mix(in oklch, var(--primary) 70%, transparent);
    --primary-80: color-mix(in oklch, var(--primary) 80%, transparent);
    --primary-90: color-mix(in oklch, var(--primary) 90%, transparent);
    /* Shade variants (darker - mix with black) */
    --primary-d-1: color-mix(in oklch, var(--primary), black 20%);
    --primary-d-2: color-mix(in oklch, var(--primary), black 40%);
    --primary-d-3: color-mix(in oklch, var(--primary), black 60%);
    --primary-d-4: color-mix(in oklch, var(--primary), black 80%);
    /* Tint variants (lighter - mix with white) */
    --primary-l-1: color-mix(in oklch, var(--primary), white 20%);
    --primary-l-2: color-mix(in oklch, var(--primary), white 40%);
    --primary-l-3: color-mix(in oklch, var(--primary), white 60%);
    --primary-l-4: color-mix(in oklch, var(--primary), white 80%);

    /* ========================================
       SECONDARY COLOR + Dynamic Variants
       ======================================== */
    --secondary: oklch(0.20 0 0); /* gets written by theme-style */
    --secondary-5: color-mix(in oklch, var(--secondary) 5%, transparent);
    --secondary-10: color-mix(in oklch, var(--secondary) 10%, transparent);
    --secondary-20: color-mix(in oklch, var(--secondary) 20%, transparent);
    --secondary-30: color-mix(in oklch, var(--secondary) 30%, transparent);
    --secondary-40: color-mix(in oklch, var(--secondary) 40%, transparent);
    --secondary-50: color-mix(in oklch, var(--secondary) 50%, transparent);
    --secondary-60: color-mix(in oklch, var(--secondary) 60%, transparent);
    --secondary-70: color-mix(in oklch, var(--secondary) 70%, transparent);
    --secondary-80: color-mix(in oklch, var(--secondary) 80%, transparent);
    --secondary-90: color-mix(in oklch, var(--secondary) 90%, transparent);
    --secondary-d-1: color-mix(in oklch, var(--secondary), black 20%);
    --secondary-d-2: color-mix(in oklch, var(--secondary), black 40%);
    --secondary-d-3: color-mix(in oklch, var(--secondary), black 60%);
    --secondary-d-4: color-mix(in oklch, var(--secondary), black 80%);
    --secondary-l-1: color-mix(in oklch, var(--secondary), white 20%);
    --secondary-l-2: color-mix(in oklch, var(--secondary), white 40%);
    --secondary-l-3: color-mix(in oklch, var(--secondary), white 60%);
    --secondary-l-4: color-mix(in oklch, var(--secondary), white 80%);

    /* ========================================
       TERTIARY COLOR + Dynamic Variants
       ======================================== */
    --tertiary: oklch(0.10 0 0); /* gets written by theme-style */
    --tertiary-5: color-mix(in oklch, var(--tertiary) 5%, transparent);
    --tertiary-10: color-mix(in oklch, var(--tertiary) 10%, transparent);
    --tertiary-20: color-mix(in oklch, var(--tertiary) 20%, transparent);
    --tertiary-30: color-mix(in oklch, var(--tertiary) 30%, transparent);
    --tertiary-40: color-mix(in oklch, var(--tertiary) 40%, transparent);
    --tertiary-50: color-mix(in oklch, var(--tertiary) 50%, transparent);
    --tertiary-60: color-mix(in oklch, var(--tertiary) 60%, transparent);
    --tertiary-70: color-mix(in oklch, var(--tertiary) 70%, transparent);
    --tertiary-80: color-mix(in oklch, var(--tertiary) 80%, transparent);
    --tertiary-90: color-mix(in oklch, var(--tertiary) 90%, transparent);
    --tertiary-d-1: color-mix(in oklch, var(--tertiary), black 20%);
    --tertiary-d-2: color-mix(in oklch, var(--tertiary), black 40%);
    --tertiary-d-3: color-mix(in oklch, var(--tertiary), black 60%);
    --tertiary-d-4: color-mix(in oklch, var(--tertiary), black 80%);
    --tertiary-l-1: color-mix(in oklch, var(--tertiary), white 20%);
    --tertiary-l-2: color-mix(in oklch, var(--tertiary), white 40%);
    --tertiary-l-3: color-mix(in oklch, var(--tertiary), white 60%);
    --tertiary-l-4: color-mix(in oklch, var(--tertiary), white 80%);

    /* ========================================
       SURFACE & TEXT COLORS
       ======================================== */
    --bg-body: oklch(0.98 0 0);
    --bg-surface: oklch(0.98 0 0);
    --text-body: oklch(0.20 0 0);
    --text-title: oklch(0 0 0);

    /* ========================================
       LIGHT & DARK UTILITY COLORS
       ======================================== */
    --light: oklch(1 0 0);
    --light-5: color-mix(in oklch, var(--light) 5%, transparent);
    --light-10: color-mix(in oklch, var(--light) 10%, transparent);
    --light-20: color-mix(in oklch, var(--light) 20%, transparent);
    --light-30: color-mix(in oklch, var(--light) 30%, transparent);
    --light-40: color-mix(in oklch, var(--light) 40%, transparent);
    --light-50: color-mix(in oklch, var(--light) 50%, transparent);
    --light-60: color-mix(in oklch, var(--light) 60%, transparent);
    --light-70: color-mix(in oklch, var(--light) 70%, transparent);
    --light-80: color-mix(in oklch, var(--light) 80%, transparent);
    --light-90: color-mix(in oklch, var(--light) 90%, transparent);

    --dark: oklch(0 0 0);
    --dark-5: color-mix(in oklch, var(--dark) 5%, transparent);
    --dark-10: color-mix(in oklch, var(--dark) 10%, transparent);
    --dark-20: color-mix(in oklch, var(--dark) 20%, transparent);
    --dark-30: color-mix(in oklch, var(--dark) 30%, transparent);
    --dark-40: color-mix(in oklch, var(--dark) 40%, transparent);
    --dark-50: color-mix(in oklch, var(--dark) 50%, transparent);
    --dark-60: color-mix(in oklch, var(--dark) 60%, transparent);
    --dark-70: color-mix(in oklch, var(--dark) 70%, transparent);
    --dark-80: color-mix(in oklch, var(--dark) 80%, transparent);
    --dark-90: color-mix(in oklch, var(--dark) 90%, transparent);
    --dark-d-1: var(--dark);
    --dark-d-2: var(--dark);
    --dark-d-3: var(--dark);
    --dark-d-4: var(--dark);
    --dark-d-5: var(--dark);
    --dark-d-6: var(--dark);
    --dark-d-7: var(--dark);
    --dark-d-8: var(--dark);
    --dark-d-9: var(--dark);
    --dark-d-10: var(--dark);

    /* ========================================
       GRAY COLOR + Dynamic Variants
       ======================================== */
    --gray: oklch(0.18 0 0);
    --gray-d-1: color-mix(in oklch, var(--gray), black 20%);
    --gray-d-2: color-mix(in oklch, var(--gray), black 40%);
    --gray-d-3: color-mix(in oklch, var(--gray), black 60%);
    --gray-d-4: color-mix(in oklch, var(--gray), black 80%);
    --gray-l-1: color-mix(in oklch, var(--gray), white 20%);
    --gray-l-2: color-mix(in oklch, var(--gray), white 40%);
    --gray-l-3: color-mix(in oklch, var(--gray), white 60%);
    --gray-l-4: color-mix(in oklch, var(--gray), white 80%);

    /* ========================================
       SUCCESS COLOR + Dynamic Variants
       ======================================== */
    --success: oklch(0.58 0.19 142);
    --success-5: color-mix(in oklch, var(--success) 5%, transparent);
    --success-10: color-mix(in oklch, var(--success) 10%, transparent);
    --success-20: color-mix(in oklch, var(--success) 20%, transparent);
    --success-30: color-mix(in oklch, var(--success) 30%, transparent);
    --success-40: color-mix(in oklch, var(--success) 40%, transparent);
    --success-50: color-mix(in oklch, var(--success) 50%, transparent);
    --success-60: color-mix(in oklch, var(--success) 60%, transparent);
    --success-70: color-mix(in oklch, var(--success) 70%, transparent);
    --success-80: color-mix(in oklch, var(--success) 80%, transparent);
    --success-90: color-mix(in oklch, var(--success) 90%, transparent);
    --success-d-1: color-mix(in oklch, var(--success), black 20%);
    --success-d-2: color-mix(in oklch, var(--success), black 40%);
    --success-d-3: color-mix(in oklch, var(--success), black 60%);
    --success-d-4: color-mix(in oklch, var(--success), black 80%);
    --success-l-1: color-mix(in oklch, var(--success), white 20%);
    --success-l-2: color-mix(in oklch, var(--success), white 40%);
    --success-l-3: color-mix(in oklch, var(--success), white 60%);
    --success-l-4: color-mix(in oklch, var(--success), white 80%);

    /* ========================================
       ERROR COLOR + Dynamic Variants
       ======================================== */
    --error: oklch(0.63 0.26 29);
    --error-5: color-mix(in oklch, var(--error) 5%, transparent);
    --error-10: color-mix(in oklch, var(--error) 10%, transparent);
    --error-20: color-mix(in oklch, var(--error) 20%, transparent);
    --error-30: color-mix(in oklch, var(--error) 30%, transparent);
    --error-40: color-mix(in oklch, var(--error) 40%, transparent);
    --error-50: color-mix(in oklch, var(--error) 50%, transparent);
    --error-60: color-mix(in oklch, var(--error) 60%, transparent);
    --error-70: color-mix(in oklch, var(--error) 70%, transparent);
    --error-80: color-mix(in oklch, var(--error) 80%, transparent);
    --error-90: color-mix(in oklch, var(--error) 90%, transparent);
    --error-d-1: color-mix(in oklch, var(--error), black 20%);
    --error-d-2: color-mix(in oklch, var(--error), black 40%);
    --error-d-3: color-mix(in oklch, var(--error), black 60%);
    --error-d-4: color-mix(in oklch, var(--error), black 80%);
    --error-l-1: color-mix(in oklch, var(--error), white 20%);
    --error-l-2: color-mix(in oklch, var(--error), white 40%);
    --error-l-3: color-mix(in oklch, var(--error), white 60%);
    --error-l-4: color-mix(in oklch, var(--error), white 80%);

    /* ========================================
       BORDER & SHADOW
       ======================================== */
    --border-primary: oklch(0.50 0 0 / 0.25);
    --shadow-primary: oklch(0 0 0 / 0.15);

    /* ========================================
       SPACING (Responsive via clamp)
       ======================================== */
    --space-4xs: clamp(0.2rem, calc(0vw + 0.2rem), 0.2rem);
    --space-3xs: clamp(0.4rem, calc(0vw + 0.4rem), 0.4rem);
    --space-2xs: clamp(0.6rem, calc(0vw + 0.6rem), 0.6rem);
    --space-xs: clamp(0.8rem, calc(0vw + 0.8rem), 0.8rem);
    --space-s: clamp(1.2rem, calc(0vw + 1.2rem), 1.2rem);
    --space-m: clamp(1.6rem, calc(0vw + 1.6rem), 1.6rem);
    --space-l: clamp(2rem, calc(0vw + 2rem), 2rem);
    --space-xl: clamp(2.4rem, calc(0vw + 2.4rem), 2.4rem);
    --space-2xl: clamp(2.8rem, calc(0vw + 2.8rem), 2.8rem);
    --space-3xl: clamp(4rem, calc(0vw + 4rem), 4rem);
    --space-4xl: clamp(4.8rem, calc(0vw + 4.8rem), 4.8rem);
    --space-5xl: clamp(6.4rem, calc(0vw + 6.4rem), 6.4rem);
    --space-6xl: clamp(8rem, calc(0vw + 8rem), 8rem);
    --space-7xl: clamp(9.6rem, calc(0vw + 9.6rem), 9.6rem);
    --space-8xl: clamp(11.2rem, calc(0vw + 11.2rem), 11.2rem);
    --space-9xl: clamp(12.8rem, calc(0vw + 12.8rem), 12.8rem);

    /* ========================================
       TYPOGRAPHY SIZES
       ======================================== */
    --text-4xs: clamp(0.6rem, calc(0vw + 0.6rem), 0.6rem);
    --text-3xs: clamp(0.8rem, calc(0vw + 0.8rem), 0.8rem);
    --text-2xs: clamp(1rem, calc(0vw + 1rem), 1rem);
    --text-xs: clamp(1.2rem, calc(0vw + 1.2rem), 1.2rem);
    --text-s: clamp(1.4rem, calc(0vw + 1.4rem), 1.4rem);
    --text-m: clamp(1.6rem, calc(0vw + 1.6rem), 1.6rem);
    --text-ml: clamp(1.8rem, calc(0vw + 1.8rem), 1.8rem);
    --text-l: clamp(2rem, calc(0vw + 2rem), 2rem);
    --text-xl: clamp(2.4rem, calc(0vw + 2.4rem), 2.4rem);
    --text-2xl: clamp(3.2rem, calc(0.38vw + 3.08rem), 3.6rem);
    --text-3xl: clamp(3.6rem, calc(1.15vw + 3.23rem), 4.8rem);
    --text-4xl: clamp(4.8rem, calc(1.15vw + 4.43rem), 6rem);
    --text-5xl: clamp(6rem, calc(1.15vw + 5.63rem), 7.2rem);

    --hero-title-size: var(--text-4xl);
    --post-title-size: var(--text-2xl);
    --nav-link-size: var(--text-s);

    /* ========================================
       LAYOUT
       ======================================== */
    --section-padding-y: clamp(3rem, calc(3rem + ((1vw - 0.32rem) * 2.8681)), 6rem);
    --section-padding-x: clamp(1rem, calc(1rem + ((1vw - 0.32rem) * 1.912)), 3rem);
    --container-width: 1366px;

    --min-screen-width: 320px;
    --max-screen-width: 1366px;

    --columns-1: repeat(1, minmax(0, 1fr));
    --columns-2: repeat(2, minmax(0, 1fr));
    --columns-3: repeat(3, minmax(0, 1fr));
    --columns-4: repeat(4, minmax(0, 1fr));
    --columns-5: repeat(5, minmax(0, 1fr));
    --columns-6: repeat(6, minmax(0, 1fr));
    --columns-7: repeat(7, minmax(0, 1fr));
    --columns-8: repeat(8, minmax(0, 1fr));

    /* ========================================
       BORDER RADIUS
       ======================================== */
    --radius-xs: clamp(0.3rem, calc(0vw + 0.3rem), 0.3rem);
    --radius-s: clamp(0.5rem, calc(0vw + 0.5rem), 0.5rem);
    --radius-m: clamp(1rem, calc(0vw + 1rem), 1rem);
    --radius-l: clamp(2rem, calc(0vw + 2rem), 2rem);
    --radius-xl: clamp(3rem, calc(0vw + 3rem), 3rem);
    --radius-full: 999rem;

    /* ========================================
       SHADOWS
       ======================================== */
    --shadow-xs: 0 1px 2px var(--shadow-primary);
    --shadow-s: 0 1.5px 3px var(--shadow-primary);
    --shadow-m: 0 2px 6px var(--shadow-primary);
    --shadow-l: 0 3px 12px var(--shadow-primary);
    --shadow-xl: 0 6px 48px var(--shadow-primary);
}

/* ========================================
   DARK MODE OVERRIDES
   ======================================== */
[data-color-mode="dark"] {

    --logo-url: url("assets/imgs/logo-light.png");

    --bg-body: oklch(0.12 0 0);
    --bg-surface: oklch(0.18 0 0);
    --text-body: oklch(0.90 0 0);
    --text-title: oklch(1 0 0);

    /* Swap light/dark for dark mode */
    --light: oklch(0.18 0 0); 
    --light-5: color-mix(in oklch, var(--light) 5%, transparent);
    --light-10: color-mix(in oklch, var(--light) 10%, transparent);
    --light-20: color-mix(in oklch, var(--light) 20%, transparent);
    --light-30: color-mix(in oklch, var(--light) 30%, transparent);
    --light-40: color-mix(in oklch, var(--light) 40%, transparent);
    --light-50: color-mix(in oklch, var(--light) 50%, transparent);
    --light-60: color-mix(in oklch, var(--light) 60%, transparent);
    --light-70: color-mix(in oklch, var(--light) 70%, transparent);
    --light-80: color-mix(in oklch, var(--light) 80%, transparent);
    --light-90: color-mix(in oklch, var(--light) 90%, transparent);

    --dark: oklch(1 0 0);
    --dark-5: color-mix(in oklch, var(--dark) 5%, transparent);
    --dark-10: color-mix(in oklch, var(--dark) 10%, transparent);
    --dark-20: color-mix(in oklch, var(--dark) 20%, transparent);
    --dark-30: color-mix(in oklch, var(--dark) 30%, transparent);
    --dark-40: color-mix(in oklch, var(--dark) 40%, transparent);
    --dark-50: color-mix(in oklch, var(--dark) 50%, transparent);
    --dark-60: color-mix(in oklch, var(--dark) 60%, transparent);
    --dark-70: color-mix(in oklch, var(--dark) 70%, transparent);
    --dark-80: color-mix(in oklch, var(--dark) 80%, transparent);
    --dark-90: color-mix(in oklch, var(--dark) 90%, transparent);

    --border-primary: oklch(1 0 0 / 0.15);
    --shadow-primary: oklch(0 0 0 / 0.4);
}