/* =========================
   DESIGN TOKENS (Basio)
========================= */

:root {
    /* =========================
       COLORS
    ========================= */

    /* Brand */
    --color-primary: #2563eb14;
    --color-primary-hover: #1d4ed8;
    --color-secondary: #0F3D5E; /*0F3D5E*/
    --color-secondary-hover: #0c2f47;

    /* =========================
       GRADIENTS
    ========================= */

    --color-purple: #800080FF;


    --color-button-bg-primary: linear-gradient(
          135deg,
          #F97316 0%,
          #F45D48 35%,
          #E34D8C 65%,
          #8B5CF6 100%
    );
    --color-button-secondary: #2563EB;
    --color-button-bg-secondary-hover: #F1F5F9;
    --color-border-secondary: #CBD5F5;
    --color-button-secondary-hover: #1E40AF;
    --color-button-secondary-disabled: #94A3B8;
    --color-support-bg-hover: #F8F5FF;
    --color-support-hover: #DDD6FE;
    --color-danger-bg-hover: #FEF2F2;
    --color-danger-hover: #DC2626;
    --color-dange-active: #B91C1C;

    --color-sidebar-bg-active: linear-gradient(
        135deg,
        #2563EB 0%,   /* strong blue */
        #4F46E5 35%,  /* indigo */
        #7C3AED 65%,  /* purple */
        #F97316 100%  /* warm orange tail */
    );
    --color-sidebar-bg: #f3effe;
    --color-sidebar: #475569;
    --color-sidebar-hover: #2563EB0F;




    /* === NEUTRAL === */
    --color-bg: #F8FAFC;
    --color-white: #FFFFFF;

    --color-text-primary: #0F172A;
    --color-text-secondary: #64748B;

    /* Semantic */
    --color-success: #22c55e;
    --color-success-bg: #d1fae5;
    --color-success-text: #065f46;
    --color-success-strong: #2ecc71;

    --color-danger: #ef4444;
    --color-danger-bg: #fee2e2;
    --color-danger-text: #991b1b;

    --color-warning: #f59e0b;
    --color-warning-bg: #fef3c7;
    --color-warning-text: #92400e;

    --color-info: #3b82f6;
    --color-error: #EF4444;

    --color-neutral-bg: #e5e7eb;
    --color-neutral-text: #374151;
    --color-neutral-mid: #9ca3af;

    /* Text */
    --color-text-main: #111827;
    --color-text-strong: #1f2937;
    --color-text-muted: #6b7280;
    --color-text-soft: #888;
    --color-text-inverse: #ffffff;
    --color-text-subtle: #555;
    --color-text-topbar: #666;

    /* Backgrounds */
    --color-bg-app: #f6f8fb;
    --color-bg-main: #ffffff;
    --color-bg-soft: #fff;
    --color-bg-hover: #2563EB14;
    --color-bg-nav-hover: #FFFFFF14;

    /* Borders */
    --color-border: #E2E8F0;
    --color-border-input: #d1d5db;
    --color-border-soft: #ddd;
    --color-border-table: #eee;
    --color-border-table-light: #f2f2f2;
    --color-border-muted: #ccc;
    --color-border-support: #EDE9FE;
    --color-border-danger: #FCA5A5;


    --color-shadow-dark: #00000014;
    --color-shadow-light: #FFFFFF99;

    /* Focus */
    --color-focus-ring: #2563EB1F;




    /* =========================
       SPACING
    ========================= */

    --space-2xs: 4px;
    --space-xs: 6px;
    --space-sm: 8px;
    --space-md: 10px;
    --space-lg: 12px;
    --space-xl: 16px;
    --space-2xl: 20px;
    --space-3xl: 24px;
    --space-4xl: 30px;
    --space-5xl: 40px;

    /* =========================
       BORDER RADIUS
    ========================= */

    --radius-xs: 5px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 14px;
    --radius-2xl: 16px;
    --radius-round: 999px;

    /* =========================
       FONT SIZES
    ========================= */

    --font-xs: 12px;
    --font-sm: 13px;
    --font-md: 14px;
    --font-lg: 16px;
    --font-xl: 20px;
    --font-2xl: 26px;
    --font-badge: 0.8rem;
    --font-status: 0.85rem;

    /* =========================
       FONT WEIGHTS
    ========================= */

    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* =========================
       SHADOWS
    ========================= */

    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.16);
    --shadow-dot: 0 0 0 2px rgba(0, 0, 0, 0.05);

    /*Glowing shadow*/

    --shadow-glow: 0 6px 20px rgba(99, 102, 241, 0.35);

    /* =========================
       TRANSITIONS
    ========================= */

    --transition-fast: 0.2s ease;

    /* =========================
       LAYOUT
    ========================= */

    --sidebar-width: 320px;
    --main-offset: 360px;
    --topbar-height: 60px;
    --content-max-form: 600px;
    --sticky-offset: 20px;

    /* =========================
       ADDITIONS / REFINEMENTS
    ========================= */



}