/* ══════════════════════════════════════════════════════════════
   DESIGN TOKENS — Remote Agents
   Centralized variables for typography, colors, spacing,
   radii, shadows, and transitions.
   Inspired by FlyonUI dashboard aesthetic.
   ══════════════════════════════════════════════════════════════ */

:root {
    /* ── Typography ─────────────────────────────────────────── */
    --font-sans: 'DM Sans', system-ui, sans-serif;

    --text-2xs:  .75rem;      /* 12px — table headers, badges, timestamps */
    --text-xs:   .8125rem;   /* 13px — labels, breadcrumb, captions */
    --text-sm:   .875rem;    /* 14px — field-error, pagination, secondary text */
    --text-base: .9375rem;   /* 15px — body, table cells, inputs, sidebar links */
    --text-md:   1rem;       /* 16px — subtitles, larger body */
    --text-lg:   1.125rem;   /* 18px — card headings, tab titles */
    --text-xl:   1.5rem;     /* 24px — page-title */
    --text-2xl:  1.75rem;    /* 28px — stat values, hero numbers */

    /* ── Semantic Colors (Light) ─────────────────────────────── */
    --c-text:          #1f2937;
    --c-text-muted:    #6b7280;
    --c-surface:       #ffffff;
    --c-surface-alt:   #f8f9fc;
    --c-body:          #f1f3f9;
    --c-border:        #e8eaef;

    /* ── Brand Colors ────────────────────────────────────────── */
    --c-primary:       #3b82f6;
    --c-primary-hover: #2563eb;
    --c-primary-bg:    rgba(59, 130, 246, .08);
    --c-accent:        #8b5cf6;
    --c-accent-hover:  #7c3aed;

    --c-success:       #10b981;
    --c-success-bg:    #ecfdf5;
    --c-success-text:  #065f46;
    --c-success-border:#a7f3d0;

    --c-danger:        #ef4444;
    --c-danger-bg:     #fef2f2;
    --c-danger-text:   #991b1b;
    --c-danger-border: #fecaca;
    --c-danger-hover:  #dc2626;

    --c-warning:       #f59e0b;
    --c-warning-bg:    #fffbeb;
    --c-warning-text:  #92400e;
    --c-warning-border:#fde68a;

    --c-info:          #3b82f6;
    --c-info-bg:       #eff6ff;
    --c-info-text:     #1e40af;
    --c-info-border:   #bfdbfe;

    /* Sidebar */
    --c-sidebar-from:  #0a0a0a;
    --c-sidebar-to:    #171717;

    /* Stat accents */
    --c-accent-green:      #16a34a;
    --c-accent-green-bg:   rgba(22, 163, 74, .1);
    --c-accent-amber:      #d97706;
    --c-accent-amber-bg:   rgba(217, 119, 6, .1);
    --c-accent-blue:       #2563eb;
    --c-accent-blue-bg:    rgba(37, 99, 235, .1);
    --c-accent-purple:     #8b5cf6;
    --c-accent-purple-bg:  rgba(139, 92, 246, .1);
    --c-accent-rose:       #e11d48;
    --c-accent-rose-bg:    rgba(225, 29, 72, .1);
    --c-accent-cyan:       #0891b2;
    --c-accent-cyan-bg:    rgba(8, 145, 178, .1);

    /* Notification badge */
    --c-notif-badge:   #ef4444;

    /* Sign-out / destructive text */
    --c-destructive:   #dc2626;

    /* ── Spacing ───────────────────────────────────────────── */
    --sp-0:  0;
    --sp-1:  .125rem;   /*  2px */
    --sp-2:  .25rem;    /*  4px */
    --sp-3:  .375rem;   /*  6px */
    --sp-4:  .5rem;     /*  8px */
    --sp-5:  .625rem;   /* 10px */
    --sp-6:  .75rem;    /* 12px */
    --sp-8:  1rem;      /* 16px */
    --sp-10: 1.25rem;   /* 20px */
    --sp-12: 1.5rem;    /* 24px */
    --sp-16: 2rem;      /* 32px */

    /* ── Border Radius ─────────────────────────────────────── */
    --radius-sm:   .25rem;     /* 4px — small badges */
    --radius-md:   .375rem;    /* 6px — inputs, buttons */
    --radius-lg:   .5rem;      /* 8px — cards, panels */
    --radius-xl:   .75rem;     /* 12px — large cards, modals */
    --radius-2xl:  1rem;       /* 16px — hero cards */
    --radius-full: 9999px;

    /* ── Shadows ─────────────────────────────────────────── */
    --shadow-xs:  0 1px 2px rgba(0, 0, 0, .04);
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .03);
    --shadow-md:  0 4px 12px -1px rgba(0, 0, 0, .06), 0 2px 4px -2px rgba(0, 0, 0, .04);
    --shadow-lg:  0 10px 24px -3px rgba(0, 0, 0, .08), 0 4px 8px -4px rgba(0, 0, 0, .04);
    --shadow-xl:  0 20px 40px -5px rgba(0, 0, 0, .1), 0 8px 16px -6px rgba(0, 0, 0, .05);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .02);
    --shadow-card-hover: 0 8px 24px -4px rgba(0, 0, 0, .08), 0 2px 6px -2px rgba(0, 0, 0, .04);

    /* ── Transitions ───────────────────────────────────────── */
    --duration-fast:   .15s;
    --duration-normal: .2s;
    --duration-slow:   .3s;
    --ease-default:    cubic-bezier(.4, 0, .2, 1);

    --transition-colors:   color var(--duration-fast) var(--ease-default),
                           background-color var(--duration-fast) var(--ease-default),
                           border-color var(--duration-fast) var(--ease-default);
    --transition-transform: transform var(--duration-fast) var(--ease-default);
    --transition-opacity:   opacity var(--duration-fast) var(--ease-default);
}

/* ── Dark Mode (layered surfaces inspired by FlyonUI) ──────── */
[data-theme="dark"] {
    --c-text:          #e8e6ef;
    --c-text-muted:    #9ca3af;
    --c-body:          #13111a;
    --c-surface:       #1a1825;
    --c-surface-alt:   #232131;
    --c-border:        rgba(255, 255, 255, .08);

    --c-primary-bg:    rgba(59, 130, 246, .12);

    --c-success-bg:    rgba(16, 185, 129, .12);
    --c-success-text:  #6ee7b7;
    --c-success-border:rgba(16, 185, 129, .2);

    --c-danger-bg:     rgba(239, 68, 68, .12);
    --c-danger-text:   #fca5a5;
    --c-danger-border: rgba(239, 68, 68, .2);

    --c-warning-bg:    rgba(245, 158, 11, .12);
    --c-warning-text:  #fcd34d;
    --c-warning-border:rgba(245, 158, 11, .2);

    --c-info-bg:       rgba(59, 130, 246, .12);
    --c-info-text:     #93c5fd;
    --c-info-border:   rgba(59, 130, 246, .2);

    --shadow-xs:  0 1px 2px rgba(0, 0, 0, .3);
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .25);
    --shadow-md:  0 4px 12px -1px rgba(0, 0, 0, .5), 0 2px 4px -2px rgba(0, 0, 0, .3);
    --shadow-lg:  0 10px 24px -3px rgba(0, 0, 0, .5), 0 4px 8px -4px rgba(0, 0, 0, .3);
    --shadow-xl:  0 20px 40px -5px rgba(0, 0, 0, .6), 0 8px 16px -6px rgba(0, 0, 0, .35);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, .2), 0 1px 2px rgba(0, 0, 0, .15);
    --shadow-card-hover: 0 8px 24px -4px rgba(0, 0, 0, .4), 0 2px 6px -2px rgba(0, 0, 0, .2);
}