/* 
  Global Design Tokens
  Available site-wide for all patterns and templates
*/

:root {
    /* Colors */
    --primary-teal: #03B8AF;
    --primary-dark-teal: #008982;
    --accent-red: #FC080C;
    --warning-bg: #07928B;
    --text-main: #121212;
    --text-muted: #999894;
    --bg-light: #F8FAFA;
    --bg-white: #FFFFFF;
    --border-light: #E2E2E2;

    --primary-teal-light: #1CB7AF;
    --primary-teal-dark: #00938C;
    --primary-gradient: linear-gradient(162deg, #03B8AF 0%, #008982 100%);
    --gradient-teal: linear-gradient(162deg, #03B8AF 0%, #008982 100%);
    --bg-light-teal: #EBFFFE;
    --white: #FFFFFF;
    --black: #000000;
    --gray-50: #F8FAFC;
    --gray-100: #F1F5F9;
    --gray-200: #E2E8F0;
    --gray-600: #475569;
    --gray-700: #334155;
    --text-primary: #03030F;
    --text-secondary: #6B6B69;
    --text-teal: #0F7873;

    /* Spacing & Layout */
    --container-max-width: 1440px;
    --max-width: 1440px;
    --section-padding: 80px;
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 64px;
    --space-3xl: 80px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 12px;
    --radius-lg: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0px 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0px 8px 8px -4px rgba(0, 0, 0, 0.04), 0px 17px 22px -4px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0px 10px 36px rgba(0, 0, 0, 0.16), 0px 0px 0px 1px rgba(0, 0, 0, 0.06);

    /* Satoshi Font Stack */
    --font-satoshi: 'Satoshi', sans-serif;
}