/* ==========================================================================
   CSS Variables -- The Control Center
   ========================================================================== */
:root {
    /* Colors */
    --color-black: #111111;
    --color-white: #ffffff;

    /* Accent (keep minimal color usage) */
    --color-accent: var(--color-black);
    --color-highlight: rgba(245, 191, 15, 0.32);

    --color-semantic-positive: #4f7f06;
    --color-semantic-positive-bg: #eef6e3;
    --color-semantic-negative: #de1135;
    --color-semantic-negative-bg: #ffe1de;

    --color-background-primary: var(--color-white);
    --color-background-secondary: #f7f7f7;
    --color-background-tertiary: #ededed;
    --color-background-transparent70: #000000bb;
    --color-background-transparent5: #00000005;
    --color-background-transparent1: #00000001;
    --color-background-accent: var(--color-black);

    --color-text-primary: var(--color-black);
    --color-text-secondary: #4f4f4f;
    --color-text-tertiary: #6f6f6f;
    --color-text-accent: var(--color-white);

    --color-border-primary: #e6e6e6;
    --color-border-secondary: #f0f0f0;
    --color-border-tertiary: #f8f8f8;
    --color-border-accent: var(--color-accent);

    --color-link: var(--color-text-primary);
    --color-link-hover: #000000;

    /* Typography */
    --font-family-primary: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-family-heading: "Noto Sans Display", "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-size-xxl: 2.30rem;
    --font-size-xl: 1.60rem;
    --font-size-lg: 1.26rem;
    --font-size-md: 1.040rem;
    /* base ~17px */
    --font-size-sm: 0.86rem;
    --line-height-base: 1.50;
    --line-height-titles: 1.26;

    /* Spacing & Sizing */
    --spacing-0: 0px;
    --spacing-half: calc(var(--spacing-unit)/2);
    --spacing-unit: 8px;
    --spacing-xs: var(--spacing-unit);
    /* 8px */
    --spacing-sm: calc(var(--spacing-unit) * 2);
    /* 16px */
    --spacing-md: calc(var(--spacing-unit) * 3);
    /* 24px */
    --spacing-lg: calc(var(--spacing-unit) * 4);
    /* 32px */
    --spacing-xl: calc(var(--spacing-unit) * 6);
    /* 48px */
    --spacing-xxl: calc(var(--spacing-unit) * 8);
    /* 64px */

    --sidebar-width: 320px;
    --header-height: 64px;
    --md-image-height: 200px;

    /* Borders & Shadows */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-max: 999px;
    --border: 2px solid var(--color-border-primary);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.12);
}