/* FFToolkit design tokens (fixed light theme)
   - Primitives: ff-blue-*, ff-slate-*
   - Semantics: ff-surface-*, ff-text-*, ff-border-*, ff-brand-*, ff-*-state
*/

:root {
    /* ============================================
       PRIMITIVES
       ============================================ */
    --ff-blue-50:  #EFF6FF;
    --ff-blue-100: #DBEAFE;
    --ff-blue-200: #BFDBFE;
    --ff-blue-300: #93C5FD;
    --ff-blue-400: #60A5FA;
    --ff-blue-500: #3B82F6;
    --ff-blue-600: #2563EB;
    --ff-blue-700: #1D4ED8;
    --ff-blue-800: #1E40AF;
    --ff-blue-900: #1E3A8A;

    --ff-slate-50:  #F8FAFC;
    --ff-slate-100: #F1F5F9;
    --ff-slate-200: #E2E8F0;
    --ff-slate-300: #CBD5E1;
    --ff-slate-400: #94A3B8;
    --ff-slate-500: #64748B;
    --ff-slate-600: #475569;
    --ff-slate-700: #334155;
    --ff-slate-800: #1E293B;
    --ff-slate-900: #0F172A;

    --ff-red-600: #DC2626;
    --ff-green-600: #16A34A;
    --ff-amber-600: #D97706;
    --ff-sky-600: #0284C7;

    /* ============================================
       SEMANTIC TOKENS
       ============================================ */
    /* Surfaces */
    /* Cooler blue-gray bases (avoid warm/pink tint) */
    --ff-surface-0: #F3F6FB;             /* app background */
    --ff-surface-1: #FFFFFF;             /* cards */
    --ff-surface-2: #EDF2FA;             /* subtle containers */

    /* Text */
    --ff-text-1: var(--ff-slate-900);
    --ff-text-2: var(--ff-slate-600);
    --ff-text-3: var(--ff-slate-500);
    --ff-text-inverse: #FFFFFF;

    /* Borders */
    --ff-border-1: rgba(15, 23, 42, 0.12);
    --ff-border-2: rgba(15, 23, 42, 0.16);
    --ff-border-strong: rgba(15, 23, 42, 0.35);

    /* Brand */
    /* Darker, calmer primary blue */
    --ff-brand: var(--ff-blue-800);
    --ff-brand-hover: var(--ff-blue-900);
    --ff-brand-active: #0B1F5E; /* slightly deeper than blue-900 */
    --ff-brand-soft: rgba(30, 64, 175, 0.12); /* based on blue-800 */
    --ff-brand-contrast: #FFFFFF;

    /* States */
    --ff-info: var(--ff-sky-600);
    --ff-success: var(--ff-green-600);
    --ff-warning: var(--ff-amber-600);
    --ff-error: var(--ff-red-600);
    --ff-success-soft: rgba(22, 163, 74, 0.14);
    --ff-warning-soft: rgba(217, 119, 6, 0.16);
    --ff-error-soft: rgba(220, 38, 38, 0.14);

    /* Focus ring */
    --ff-focus-ring: 0 0 0 3px var(--ff-brand-soft);

    /* Radii */
    --ff-radius-1: 6px;
    --ff-radius-2: 10px;
    --ff-radius-3: 14px;
    --ff-radius-4: 18px;

    /* Shadows (light) */
    --ff-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06);
    --ff-shadow-2: 0 6px 18px rgba(15, 23, 42, 0.10);
    --ff-shadow-3: 0 16px 40px rgba(15, 23, 42, 0.14);

    /* Elevation aliases (for readability) */
    --ff-elevation-card: var(--ff-shadow-2);
    --ff-elevation-modal: var(--ff-shadow-3);

    /* Inputs */
    --ff-input-bg: var(--ff-surface-1);
    --ff-input-text: var(--ff-text-1);
    --ff-input-placeholder: var(--ff-text-3);
    --ff-input-border: var(--ff-border-2);
    --ff-input-border-hover: rgba(37, 99, 235, 0.35);
    --ff-input-border-focus: var(--ff-brand);

    /* App chrome */
    --ff-appbar-bg: var(--ff-surface-1);
    --ff-drawer-bg: var(--ff-surface-1);

    /* Overlays */
    --ff-overlay-backdrop: rgba(0, 0, 0, 0.70);
}