/* =====================================================
   Sleep University — Design Tokens (Duolingo-inspired)
   Bold, playful, rounded, high engagement
   ===================================================== */

/* Font loaded via <link> in MasterPage.Master for parallel fetch (not @import) */

:root {
    /* ---- Brand Colours (bold & saturated) ---- */
    --su-teal: #00b8d4;
    --su-teal-dark: #0097a7;
    --su-teal-light: #e0f7fa;
    --su-teal-border: #009db3;

    --su-coral: #ff6b6b;
    --su-coral-dark: #e05555;
    --su-coral-light: #ffe0e0;

    --su-green: #58cc02;
    --su-green-dark: #46a302;
    --su-green-light: #d7ffb8;
    --su-green-border: #4bac04;

    --su-amber: #ffb800;
    --su-amber-dark: #e0a200;
    --su-amber-light: #fff3cd;

    --su-purple: #ce82ff;
    --su-purple-dark: #a855f7;
    --su-purple-light: #f3e8ff;

    --su-navy: #041e43;
    --su-navy-light: #041e43;

    /* ---- Neutrals ---- */
    --su-white: #ffffff;
    --su-grey-50: #f7f7f7;
    --su-grey-100: #efefef;
    --su-grey-200: #e5e5e5;
    --su-grey-300: #d4d4d4;
    --su-grey-400: #a3a3a3;
    --su-grey-500: #737373;
    --su-grey-600: #525252;
    --su-grey-700: #404040;
    --su-grey-800: #262626;
    --su-grey-900: #171717;

    /* ---- Category Colours (for course cards) ---- */
    --su-cat-science: #00b8d4;
    --su-cat-product: #ff6b6b;
    --su-cat-professional: #ffb800;

    /* ---- Typography ---- */
    --su-font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --su-font-mono: 'SF Mono', 'Fira Code', monospace;

    --su-text-xs: 0.8125rem;   /* 13px (was 12px) */
    --su-text-sm: 0.9375rem;   /* 15px (was 14px) */
    --su-text-base: 1rem;      /* 16px */
    --su-text-lg: 1.125rem;    /* 18px */
    --su-text-xl: 1.3125rem;   /* 21px (was 20px) */
    --su-text-2xl: 1.625rem;   /* 26px */
    --su-text-3xl: 2rem;       /* 32px */
    --su-text-4xl: 2.5rem;     /* 40px */
    --su-text-5xl: 3rem;       /* 48px */

    --su-leading-tight: 1.2;
    --su-leading-normal: 1.5;
    --su-leading-relaxed: 1.8;

    /* ---- Spacing ---- */
    --su-space-xs: 0.25rem;    /* 4px */
    --su-space-sm: 0.5rem;     /* 8px */
    --su-space-md: 1rem;       /* 16px */
    --su-space-lg: 1.5rem;     /* 24px */
    --su-space-xl: 2rem;       /* 32px */
    --su-space-2xl: 3rem;      /* 48px */
    --su-space-3xl: 4rem;      /* 64px */
    --su-space-4xl: 6rem;      /* 96px */

    /* ---- Borders & Radius (Duolingo: heavily rounded) ---- */
    --su-radius-sm: 8px;
    --su-radius-md: 12px;
    --su-radius-lg: 16px;
    --su-radius-xl: 20px;
    --su-radius-2xl: 24px;
    --su-radius-pill: 50px;
    --su-radius-full: 50%;

    /* ---- Shadows (Duolingo style: thick bottom borders for 3D depth) ---- */
    --su-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --su-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --su-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --su-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.16);
    --su-shadow-header: 0 2px 12px rgba(0, 0, 0, 0.06);

    /* 3D button/card bottom border thickness */
    --su-depth-sm: 2px;
    --su-depth-md: 3px;
    --su-depth-lg: 4px;

    /* ---- Semantic Colours ---- */
    --su-success: #58cc02;
    --su-success-light: #f0fdf4;
    --su-danger: #ff6b6b;
    --su-danger-light: #fef2f2;

    /* ---- Transitions ---- */
    --su-transition-fast: 120ms ease;
    --su-transition-base: 200ms ease;
    --su-transition-slow: 350ms ease;
    --su-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --su-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Duration-only tokens (for multi-property transitions) */
    --su-duration-fast: 120ms;
    --su-duration-base: 200ms;
    --su-duration-slow: 350ms;
    --su-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ---- Layout ---- */
    --su-max-width: 1120px;
    --su-content-width: 680px;
    --su-sidebar-width: 260px;
    --su-header-height: 80px;
}