/**
 * Logical UI
 * CSS variables
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Brand */
    --teal-500:  #1E9090;  /* Primary */
    --teal-600:  #157474;
    --teal-400:  #2AACAC;
    --teal-50:   #F0FAFA;
    --teal-100:  #CCEEEE;
    --teal-200:  #99DDDD;

    /* Neutral */
    --neutral-0:   #FFFFFF;
    --neutral-25: #FAFAFA;
    --neutral-50:  #F7F8F8;  /* Page background */
    --neutral-100: #EDEEF0;  /* Default borders */
    --neutral-200: #D8DADD;  /* Strong borders */
    --neutral-300: #BABDC2;
    --neutral-400: #9CA0A6;  /* Placeholders */
    --neutral-500: #7B8086;
    --neutral-600: #5A5F66;  /* Secondary text */
    --neutral-700: #3D4146;
    --neutral-800: #1F2226;  /* Strong text */
    --neutral-900: #111417;  /* Primary text */

    /* Shadows */
    --shadow-sm-color: rgb(0 0 0/.04);

    --shadow-sm: 0 1px 2px 0 var(--shadow-sm-color);
    --shadow-md: 0 2px 8px 0 rgb(0 0 0/.08);
    --shadow-lg: 0 4px 20px 0 rgb(0 0 0/.10);
    --shadow-overlay: 0 8px 40px 0 rgb(0 0 0/.14);

    --shadow-sm-top: 0 -1px 2px -1px var(--shadow-sm-color);
    --shadow-sm-bottom: 0 1px 2px -1px var(--shadow-sm-color);
    --shadow-sm-left: -1px 0 2px -1px var(--shadow-sm-color);
    --shadow-sm-right: 1px 0 2px -1px var(--shadow-sm-color);

    /* Semantic */
    --color-success: #16A34A;  --color-success-bg: #F0FDF4;
    --color-warning: #CA8A04;  --color-warning-bg: #FEFCE8;
    --color-danger:  #DC2626;  --color-danger-bg:  #FEF2F2;
    --color-info:    #2563EB;  --color-info-bg:    #EFF6FF;

    /* Spacing (4px base) */
    --sp-1:4px; --sp-2:8px;  --sp-3:12px; --sp-4:16px;
    --sp-5:20px;--sp-6:24px; --sp-8:32px; --sp-10:40px;
    --sp-12:48px;--sp-16:64px;

    /* Layout */
    --sidebar-w: 220px;
    --topbar-h:  52px;
    --radius-sm: 2px;

    /* Transitions */
    --transition-fast: 100ms ease;
    --transition-base: 150ms ease;
    --transition-slow: 250ms ease;

    /* Text options */
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 15px;
    --text-lg: 17px;
    --text-x1: 20px;
    --text-2x1: 24px;
    --text-3x1: 30px;
    --text-4x1: 36px;
    --text-5x1: 48px;

    /* Admin specific */
    --amber-50: #FFFBEB;
    --amber-100: #FEF3C7;
    --amber-400: #FBBF24;
    --amber-500: #F59E0B;
    --amber-600: #D97706;

    --adminBar-h: 35px;

}