/* ===== DESIGN TOKENS (DigitalOcean Design System) ===== */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&family=Source+Code+Pro:wght@400;500;600&display=swap');

:root {
    /* Brand Blue */
    --color-blue-50:  #e6f3ff;
    --color-blue-100: #b3d9ff;
    --color-blue-200: #66b3ff;
    --color-blue-300: #3399ff;
    --color-blue-400: #0080ff;
    --color-blue-500: #006fd6;
    --color-blue-600: #005db3;
    --color-blue-700: #004a8f;

    /* Neutral Grays */
    --color-gray-0:   #ffffff;
    --color-gray-50:  #f5f6f7;
    --color-gray-100: #ebebeb;
    --color-gray-200: #d9d9d9;
    --color-gray-300: #b3b3b3;
    --color-gray-400: #808080;
    --color-gray-500: #4d4d4d;
    --color-gray-600: #333333;
    --color-gray-700: #1a1a1a;
    --color-gray-800: #111111;

    /* Semantic */
    --color-success-light: #f0faf5;
    --color-success:       #1db954;
    --color-success-dark:  #158f3e;
    --color-warning-light: #fffbea;
    --color-warning:       #f5a623;
    --color-warning-dark:  #c4851c;
    --color-danger-light:  #fff5f5;
    --color-danger:        #e53e3e;
    --color-danger-dark:   #b52a2a;
    --color-info-light:    #e6f3ff;
    --color-info:          #0080ff;

    /* Surfaces */
    --color-surface-page:          #f5f6f7;
    --color-surface-card:          #ffffff;
    --color-surface-sidebar:       #ffffff;
    --color-surface-sidebar-hover: #f5f6f7;
    --color-surface-sidebar-active:#e6f3ff;
    --color-border:                #d9d9d9;
    --color-border-focus:          #0080ff;

    /* Typography */
    --font-sans: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Source Code Pro', 'Fira Code', 'Courier New', monospace;

    --text-xs:   11px;
    --text-sm:   13px;
    --text-base: 14px;
    --text-md:   16px;
    --text-lg:   18px;
    --text-xl:   22px;
    --text-2xl:  28px;
    --text-3xl:  36px;

    --font-regular:  400;
    --font-semibold: 600;
    --font-bold:     700;

    /* Text Colors */
    --text-primary:   #333333;
    --text-secondary: #4d4d4d;
    --text-muted:     #808080;
    --text-disabled:  #b3b3b3;
    --text-link:      #0080ff;
    --text-link-hover:#006fd6;
    --text-on-dark:   #ffffff;
    --text-danger:    #e53e3e;
    --text-success:   #158f3e;
    --text-code:      #c7254e;
    --bg-code:        #f8f4f4;

    /* Spacing (8px grid) */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-7:  28px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* Layout */
    --topnav-height:     56px;
    --content-padding-x: 32px;
    --content-padding-y: 24px;
    --card-padding:      24px;
    --card-padding-sm:   16px;
    --container-width:   1200px;
    --section-padding:   80px 0;

    /* Radii */
    --radius-sm:   2px;
    --radius-md:   4px;
    --radius-lg:   6px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-none:  none;
    --shadow-xs:    0 1px 2px rgba(0,0,0,0.06);
    --shadow-sm:    0 1px 4px rgba(0,0,0,0.08);
    --shadow-md:    0 2px 8px rgba(0,0,0,0.10);
    --shadow-lg:    0 4px 16px rgba(0,0,0,0.12);
    --shadow-card:  0 1px 3px rgba(0,0,0,0.08);
    --shadow-modal: 0 4px 24px rgba(0,0,0,0.16);
    --shadow-focus: 0 0 0 3px rgba(0,128,255,0.25);

    /* Borders */
    --border-width:       1px;
    --border-color:       #d9d9d9;
    --border-color-hover: #b3b3b3;
    --border-color-focus: #0080ff;
    --border-color-error: #e53e3e;

    /* Icons */
    --icon-sm:  16px;
    --icon-md:  20px;
    --icon-lg:  24px;
    --icon-xl:  32px;
    --icon-color:         #808080;
    --icon-color-primary: #0080ff;
    --icon-color-danger:  #e53e3e;
    --icon-color-success: #1db954;

    /* Animation */
    --duration-fast:   100ms;
    --duration-normal: 150ms;
    --duration-slow:   250ms;
    --duration-page:   200ms;
    --ease-default:    ease;
    --ease-smooth:     cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: all 150ms ease;

    /* Legacy compat */
    --gold:   #fbbf24;
    --silver: #9ca3af;
    --bronze: #cd7f32;
}