/* ==========================================
   TURTLES WEB - DESIGN TOKENS & VARIABLES
   ========================================== */

:root {
    /* Brand Colors */
    --color-bg-light: #ffffff;
    --color-bg-subtle: #fafafa;
    --color-bg-dark: #050505;
    --color-bg-card-dark: #111111;
    --color-bg-pill: #f5f5f5;
    
    /* Typography Colors */
    --color-text-primary: #111111;
    --color-text-secondary: #555555;
    --color-text-muted: #888888;
    --color-text-light: #ffffff;
    --color-text-light-muted: rgba(255, 255, 255, 0.6);
    --color-text-light-subtle: rgba(255, 255, 255, 0.4);

    /* Borders & Dividers */
    --color-border-light: #eaeaea;
    --color-border-medium: #dcdcdc;
    --color-border-dark: rgba(255, 255, 255, 0.1);
    --color-border-dark-hover: rgba(255, 255, 255, 0.2);

    /* Typography Fonts */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-serif: 'Playfair Display', Georgia, serif;

    /* Transitions & Motion */
    --ease-out-cubic: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.6s var(--ease-out-cubic);

    /* Container Max Widths */
    --max-width-site: 1280px;
    --max-width-article: 720px;
    --max-width-hero: 1000px;

    /* Border Radii */
    --radius-full: 50px;
    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 12px;
}