/* ==========================================================================
   Design Tokens / CSS Custom Properties
   All colors, fonts, radii and shadows used across the portal.
   Change a value here and it propagates everywhere.
   ========================================================================== */

:root {
    /* ---- Brand ---- */
    --color-primary:        #009cb0;
    --color-primary-hover:  #0fb5cc;
    --color-primary-dark:   #007a8a;
    --color-primary-darker: #005864;
    --color-primary-accent: #12a5bf;
    --color-primary-light:  #1acbea;
    --color-primary-subtle: rgba(0, 156, 176, 0.06);
    --color-primary-glow:   rgba(0, 156, 176, 0.10);

    /* ---- Semantic ---- */
    --color-danger:         #ef4444;
    --color-danger-dark:    #dc2626;
    --color-danger-subtle:  rgba(239, 68, 68, 0.06);
    --color-warning:        #eab308;
    --color-warning-subtle: rgba(234, 179, 8, 0.06);
    --color-success:        #16a34a;
    --color-success-subtle: rgba(22, 163, 74, 0.06);
    --color-info:           #3b82f6;

    /* ---- Neutrals ---- */
    --color-text:           #1e293b;
    --color-text-muted:     #94a3b8;
    --color-text-light:     #64748b;
    --color-text-heading:   #0f172a;
    --color-white:          #fff;
    --color-black:          #000;

    /* ---- Backgrounds ---- */
    --color-bg:             #ffffff;
    --color-bg-alt:         #f8fafc;
    --color-bg-panel:       #f8fafc;
    --color-bg-grey:        #e2e8f0;
    --color-bg-hover:       #f1f5f9;
    --color-bg-selection:   rgba(0, 156, 176, 0.08);
    --color-overlay:        rgba(15, 23, 42, 0.5);

    /* ---- Borders ---- */
    --color-border:         #e2e8f0;
    --color-border-light:   #f1f5f9;
    --color-border-input:   #cbd5e1;
    --border-width-thin:    1px;

    /* ---- Sidebar ---- */
    --sidebar-bg:           #ffffff;
    --sidebar-hover-bg:     rgba(0, 156, 176, 0.08);
    --sidebar-active-bg:    #009cb0;
    --sidebar-sub-bg:       #334155;
    --sidebar-sub-hover:    #3b4d63;
    --sidebar-icon-color:   #64748b;
    --sidebar-arrow-color:  #94a3b8;
    --sidebar-active-indicator: 3px;

    /* ---- Header ---- */
    --header-height:        68px;
    --header-bg:            #ffffff;
    --header-logo-bg:       #009cb0;
    --header-icon-color:    #94a3b8;
    --header-user-color:    #64748b;

    /* ---- Typography ---- */
    --font-family:          'Open Sans', sans-serif;
    --font-size-xs:         10px;
    --font-size-sm:         12px;
    --font-size-base:       13px;
    --font-size-md:         14px;
    --font-size-lg:         16px;
    --font-size-xl:         22px;
    --font-size-xxl:        128px;
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --letter-spacing-wide:  0.025em;
    --letter-spacing-wider: 0.05em;
    --line-height-tight:    1.375;
    --line-height-relaxed:  1.625;

    /* ---- Shape ---- */
    --radius-xs:            4px;
    --radius-sm:            6px;
    --radius-md:            10px;
    --radius-lg:            30px;
    --radius-xl:            16px;
    --radius-full:          50%;
    --radius-circle:        100%;

    /* ---- Elevation ---- */
    --shadow-xs:            0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --shadow-sm:            0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md:            0 2px 8px -2px rgba(0, 0, 0, 0.08);
    --shadow-lg:            0 8px 24px -4px rgba(0, 0, 0, 0.08);
    --shadow-card:          0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --shadow-dropdown:      0 8px 30px -4px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
    --shadow-focus:         0 0 0 3px rgba(0, 156, 176, 0.2);
    --shadow-focus-danger:  0 0 0 3px rgba(239, 68, 68, 0.2);

    /* ---- Transitions ---- */
    --transition-fast:      120ms ease;
    --transition-base:      180ms ease;
    --transition-slow:      300ms ease;
}