/* PearlFibers SSO — Design Tokens */

:root {
    /* ── Colors ── */
    --pf-color-primary:       #5093c9;
    --pf-color-primary-hover:  #3d7db3;
    --pf-color-primary-light:  #e0edf7;

    --pf-color-secondary:     #000000;
    --pf-color-secondary-light: #1a1a1a;

    --pf-color-success:       #22C55E;
    --pf-color-success-light: #DCFCE7;
    --pf-color-warning:       #F59E0B;
    --pf-color-warning-light: #FEF3C7;
    --pf-color-danger:        #EF4444;
    --pf-color-danger-light:  #FEE2E2;
    --pf-color-info:          #3B82F6;
    --pf-color-info-light:    #DBEAFE;

    --pf-color-bg:            #F5F5FA;
    --pf-color-surface:       #FFFFFF;
    --pf-color-surface-hover: #F9F9FC;
    --pf-color-border:        #E2E2EE;
    --pf-color-border-focus:  #5093c9;

    --pf-color-text:          #1a1a2e;
    --pf-color-text-secondary:#6B7280;
    --pf-color-text-muted:    #9CA3AF;
    --pf-color-text-inverse:  #FFFFFF;

    /* ── Sidebar ── */
    --pf-sidebar-bg:          #000000;
    --pf-sidebar-text:        #FFFFFF;

    /* ── Typography ── */
    --pf-font-brand:          'PearlFibers Brand', system-ui, sans-serif;
    --pf-font-primary:        'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --pf-font-mono:           'JetBrains Mono', 'Fira Code', monospace;

    --pf-font-size-xs:        0.75rem;    /* 12px */
    --pf-font-size-sm:        0.875rem;   /* 14px */
    --pf-font-size-base:      1rem;       /* 16px */
    --pf-font-size-lg:        1.125rem;   /* 18px */
    --pf-font-size-xl:        1.25rem;    /* 20px */
    --pf-font-size-2xl:       1.5rem;     /* 24px */
    --pf-font-size-3xl:       1.875rem;   /* 30px */

    --pf-font-weight-normal:  400;
    --pf-font-weight-medium:  500;
    --pf-font-weight-semibold:600;
    --pf-font-weight-bold:    700;

    --pf-line-height-tight:   1.25;
    --pf-line-height-normal:  1.5;
    --pf-line-height-relaxed: 1.75;

    /* ── Spacing ── */
    --pf-space-1:  0.25rem;   /* 4px */
    --pf-space-2:  0.5rem;    /* 8px */
    --pf-space-3:  0.75rem;   /* 12px */
    --pf-space-4:  1rem;      /* 16px */
    --pf-space-5:  1.25rem;   /* 20px */
    --pf-space-6:  1.5rem;    /* 24px */
    --pf-space-8:  2rem;      /* 32px */
    --pf-space-10: 2.5rem;    /* 40px */
    --pf-space-12: 3rem;      /* 48px */
    --pf-space-16: 4rem;      /* 64px */

    /* ── Borders ── */
    --pf-radius-sm:    0.375rem;  /* 6px */
    --pf-radius-md:    0.5rem;    /* 8px */
    --pf-radius-lg:    0.75rem;   /* 12px */
    --pf-radius-xl:    1rem;      /* 16px */
    --pf-radius-full:  9999px;

    /* ── Shadows ── */
    --pf-shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
    --pf-shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --pf-shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --pf-shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* ── Transitions ── */
    --pf-transition-fast:   150ms ease;
    --pf-transition-normal: 250ms ease;
    --pf-transition-slow:   350ms ease;

    /* ── Z-index ── */
    --pf-z-dropdown:  100;
    --pf-z-overlay:   200;
    --pf-z-modal:     300;
    --pf-z-toast:     400;
}