/* ════════════════════════════════════════════════════════════════════
   App-wide design tokens — Phase 1 (PLAN-APP-VISUAL-ALIGNMENT.md)

   Loaded after app.css via layouts. Ships from public/ so no npm build is
   required. Single source for CSS variables until Phase 4 rebases pages.

   Aligned with:
     • tailwind.config.js → theme.extend.colors.primary (indigo)
     • WordPress plugin   → --lc-primary / --vm-primary (#818CF8 family)
     • Admin chat inbox   → --inbox-accent (#818CF8)

   Use var(--app-*) in custom CSS; Blade may reference these in inline styles.
   ════════════════════════════════════════════════════════════════════ */
:root {
    /* Surfaces */
    --app-bg:           #FAFAFA;
    --app-surface:      #FFFFFF;
    --app-surface-2:    #F1F5F9;
    --app-divider:      #E2E8F0;

    /* Brand (indigo — matches tailwind config + WP plugin) */
    --app-accent:        #818CF8;
    --app-accent-strong: #6366F1;
    --app-accent-soft:   #EEF2FF;
    --app-accent-ring:   rgba(99, 102, 241, 0.22);

    /* Status (semantic — never follow brand) */
    --app-status-online:  #22C55E;
    --app-status-warning: #F59E0B;
    --app-status-danger:  #EF4444;

    /* Text */
    --app-text:        #0F172A;
    --app-text-muted:  #64748B;
    --app-text-subtle: #94A3B8;

    /* Effects */
    --app-shadow-sm:    0 1px 2px rgba(11, 20, 26, 0.06);
    --app-shadow-card:  0 1px 3px 0 rgb(0 0 0 / 0.06),
                        0 1px 2px -1px rgb(0 0 0 / 0.06);
    --app-shadow-elev:  0 1px 2px rgba(11, 20, 26, 0.05),
                        0 8px 24px rgba(11, 20, 26, 0.06);
    --app-shadow-md:    0 4px 12px -2px rgb(0 0 0 / 0.08),
                        0 2px 6px -2px rgb(0 0 0 / 0.05);
    --app-shadow-focus: 0 0 0 3px var(--app-accent-ring);

    /* Geometry */
    --app-radius-sm:   8px;
    --app-radius-md:   12px;
    --app-radius-card: 16px;
    --app-radius-pill: 9999px;

    /* Motion */
    --app-tx-fast: 120ms cubic-bezier(0.22, 1, 0.36, 1);
    --app-tx-mid:  220ms cubic-bezier(0.22, 1, 0.36, 1);
    --app-spring:  280ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --app-ease:    cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Phase 2 supplemental utilities (PLAN-APP-VISUAL-ALIGNMENT.md)
   Tailwind `primary` mirrors theme.extend.colors.primary. Many variants are
   not emitted into public/css/app.css; ship them here so Blade can use
   primary-* without npm run build. ── */

.bg-primary-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.bg-primary-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.bg-primary-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1));
}
.bg-primary-900\/30 {
    background-color: rgb(49 46 129 / 0.3);
}

.text-primary-200 {
    --tw-text-opacity: 1;
    color: rgb(199 210 254 / var(--tw-text-opacity, 1));
}
.text-primary-300 {
    --tw-text-opacity: 1;
    color: rgb(165 180 252 / var(--tw-text-opacity, 1));
}
.text-primary-400 {
    --tw-text-opacity: 1;
    color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}
.text-primary-500 {
    --tw-text-opacity: 1;
    color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}
.text-primary-700 {
    --tw-text-opacity: 1;
    color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}
.text-primary-800 {
    --tw-text-opacity: 1;
    color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}
.text-primary-900 {
    --tw-text-opacity: 1;
    color: rgb(49 46 129 / var(--tw-text-opacity, 1));
}

.border-primary-200 {
    --tw-border-opacity: 1;
    border-color: rgb(199 210 254 / var(--tw-border-opacity, 1));
}
.border-primary-200\/80 {
    border-color: rgb(199 210 254 / 0.8);
}
.border-primary-300 {
    --tw-border-opacity: 1;
    border-color: rgb(165 180 252 / var(--tw-border-opacity, 1));
}
.border-primary-400 {
    --tw-border-opacity: 1;
    border-color: rgb(129 140 248 / var(--tw-border-opacity, 1));
}
.border-primary-600 {
    --tw-border-opacity: 1;
    border-color: rgb(79 70 229 / var(--tw-border-opacity, 1));
}
.border-primary-700\/50 {
    border-color: rgb(67 56 202 / 0.5);
}

.shadow-primary-500\/20 {
    --tw-shadow-color: rgb(99 102 241 / 0.2);
    --tw-shadow: var(--tw-shadow-colored);
}
.shadow-primary-600\/20 {
    --tw-shadow-color: rgb(79 70 229 / 0.2);
    --tw-shadow: var(--tw-shadow-colored);
}

.ring-primary-200 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity, 1));
}

.accent-primary-500 {
    accent-color: #6366f1;
}

.focus\:border-primary-300:focus {
    --tw-border-opacity: 1;
    border-color: rgb(165 180 252 / var(--tw-border-opacity, 1));
}
.focus\:border-primary-400:focus {
    --tw-border-opacity: 1;
    border-color: rgb(129 140 248 / var(--tw-border-opacity, 1));
}

.focus\:ring-primary-500\/25:focus {
    --tw-ring-color: rgb(99 102 241 / 0.25);
}
.focus\:ring-primary-500\/30:focus {
    --tw-ring-color: rgb(99 102 241 / 0.3);
}

.focus-within\:border-primary-300:focus-within {
    --tw-border-opacity: 1;
    border-color: rgb(165 180 252 / var(--tw-border-opacity, 1));
}

.focus-within\:ring-primary-500\/10:focus-within {
    --tw-ring-color: rgb(99 102 241 / 0.1);
}
.focus-within\:ring-primary-500\/15:focus-within {
    --tw-ring-color: rgb(99 102 241 / 0.15);
}

.focus-visible\:ring-primary-500:focus-visible {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-primary-500\/20:focus-visible {
    --tw-ring-color: rgb(99 102 241 / 0.2);
}
.focus-visible\:ring-primary-500\/30:focus-visible {
    --tw-ring-color: rgb(99 102 241 / 0.3);
}

.hover\:text-primary-600:hover {
    --tw-text-opacity: 1;
    color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}

.hover\:text-primary-800:hover {
    --tw-text-opacity: 1;
    color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:border-primary-300 {
    --tw-border-opacity: 1;
    border-color: rgb(165 180 252 / var(--tw-border-opacity, 1));
}