/**
 * CSS Variables - Edit colors, spacing, typography here
 * Changes propagate throughout the app
 */

:root {
    /* === COLORS === */
    --c-bg: #0d1117;
    --c-bg-2: #161b22;
    --c-bg-3: #1c2128;
    --c-border: #30363d;
    --c-border-2: #21262d;

    --c-text: #e6edf3;
    --c-text-2: #8b949e;
    --c-text-3: #6e7681;
    --c-link: #58a6ff;

    --c-green: #238636;
    --c-red: #da3633;
    --c-yellow: #9e6a03;
    --c-blue: #58a6ff;
    --c-purple: #8957e5;

    /* === TYPOGRAPHY === */
    --f-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --f-xs: 0.625rem;   /* 10px */
    --f-sm: 0.6875rem;  /* 11px */
    --f-base: 0.8125rem;/* 13px */
    --f-md: 0.875rem;   /* 14px */
    --f-lg: 1.125rem;   /* 18px */
    --f-xl: 1.5rem;     /* 24px */
    --f-2xl: 1.75rem;   /* 28px */

    /* === SPACING === */
    --s-1: 0.25rem;  /* 4px */
    --s-2: 0.5rem;   /* 8px */
    --s-3: 0.75rem;  /* 12px */
    --s-4: 1rem;     /* 16px */
    --s-5: 1.25rem;  /* 20px */
    --s-6: 1.5rem;   /* 24px */

    /* === RADIUS === */
    --r-sm: 0.375rem;
    --r-md: 0.5rem;
    --r-lg: 0.75rem;

    /* === LAYOUT === */
    --sidebar-w: 100%;
    --header-h: 3.5rem;

    /* === TRANSITIONS === */
    --t-fast: 0.15s ease;
    --t-normal: 0.2s ease;
}

/* Tablet+ */
@media (min-width: 768px) {
    :root {
        --sidebar-w: 320px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    :root {
        --sidebar-w: 20%;
    }
}