/* ═══════════════════════════════════════════════════════════════
   ROOT CSS VARIABLES (Design System)
═══════════════════════════════════════════════════════════════ */
:root {
    --color-primary: #3ec2cf;
    --color-primary-dark: #2a8a94;
    --color-secondary: #fdb813;
    --color-secondary-dark: #d19917;
    --color-white: #fff;
    --color-black: #000;
    --color-text: #000;
    --color-text-secondary: #666;
    --color-text-light: #898989;
    --color-text-lighter: #ccc;
    --color-text-lightest: #d1d1d1;
    --color-border: #d7d3cf;
    --color-border-light: #eaeaea;
    --color-border-lighter: #cfcfcf;
    --color-border-lightest: #f2f2f2;
    --color-border-input: #e3e3e3;
    --color-bg: #fff;
    --color-bg-gray: #f0f0f0;
    --color-bg-gray-light: #f5f5f5;
    --color-bg-gray-lighter: #f8f8f8;
    --color-bg-gray-lightest: #f9f9f9;
    --color-bg-search: #f6fcfc;
    --color-bg-alt: #F5F7FA;
    --color-silver: silver;
    --color-skeleton: #f0f0f0;
    --color-skeleton-light: #f8f8f8;
    --color-overlay: rgba(0, 0, 0, 0.7);
    --color-overlay-medium: rgba(0, 0, 0, 0.5);
    --color-overlay-light: rgba(192, 192, 192, 0.2);
    --color-hover: #ededed;
    --color-success: #09ad7e;
    --color-info: #009bc3;
    --color-warning: #fea501;
    --color-danger: #d30b0c;
    --color-folder: #536571;
    --spacing-xs: 2px;
    --spacing-sm: 5px;
    --spacing-md: 10px;
    --spacing-lg: 15px;
    --spacing-xl: 20px;
    --spacing-2xl: 30px;
    --spacing-3xl: 40px;
    --font-size-xs: 9.6px;
    --font-size-sm: 10px;
    --font-size-base: 11px;
    --font-size-md: 12px;
    --font-size-lg: 13px;
    --font-size-xl: 14px;
    --font-size-2xl: 15px;
    --font-size-3xl: 16px;
    --font-size-4xl: 18px;
    --font-size-5xl: 20px;
    --font-size-6xl: 36px;
    --font-size-7xl: 120px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    --container-max-width: 990px;
    --sidebar-width: 210px;
    --navbar-height: 60px;
    --navbar-height-scrolled: 38px;
    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;
    --radius-xl: 5px;
    --radius-full: 50px;
    --transition-fast: 0.2s;
    --transition-normal: 0.4s;
    --transition-slow: 0.5s;
    --transition-slider: 1.5s;
    --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 20px rgba(62, 194, 207, 0.3);
    --shadow-lg: 0 15px 25px rgba(62, 194, 207, 0.4);
    --z-overlay: 15;
    --z-image: 3;
    --z-text: 4;
    --z-nav: 10;
    --z-dropdown: 9999;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL RESET & BASE
═══════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: var(--font-size-3xl);
    color: var(--color-text);
    background-color: var(--color-bg);
    background-image: linear-gradient(180deg, #fffaf4 0%, #ffffff 240px);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: rgba(253, 184, 19, 0.3);
    color: #113644;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}