/* ================================================================
   TDY DESIGN TOKENS
   Shared foundation for all TODAY services.
   Version: 1.0.0 | 2026-03-09

   Usage: <link rel="stylesheet" href="/frontend/css/tdy-tokens.css">
   Load BEFORE any app-specific CSS.

   Apps reference these tokens directly:
     color: var(--tdy-text-primary);
     background: var(--tdy-bg-surface);

   Or alias them for app namespacing:
     --fp-primary: var(--tdy-primary);
   ================================================================ */


/* ----------------------------------------------------------------
   COLOR PRIMITIVES
   Raw palette values — never use these directly in components.
   Use the semantic tokens below instead.
   ---------------------------------------------------------------- */
:root {
    /* Slate (neutral base) */
    --tdy-slate-50:  #f8fafc;
    --tdy-slate-100: #f1f5f9;
    --tdy-slate-200: #e2e8f0;
    --tdy-slate-300: #cbd5e1;
    --tdy-slate-400: #94a3b8;
    --tdy-slate-500: #64748b;
    --tdy-slate-600: #475569;
    --tdy-slate-700: #334155;
    --tdy-slate-800: #1e293b;
    --tdy-slate-900: #0f172a;
    --tdy-slate-950: #020617;

    /* Blue (primary action) */
    --tdy-blue-50:  #eff6ff;
    --tdy-blue-100: #dbeafe;
    --tdy-blue-200: #bfdbfe;
    --tdy-blue-300: #93c5fd;
    --tdy-blue-400: #60a5fa;
    --tdy-blue-500: #3b82f6;
    --tdy-blue-600: #2563eb;
    --tdy-blue-700: #1d4ed8;
    --tdy-blue-800: #1e40af;
    --tdy-blue-900: #1e3a8a;

    /* Green (success / positive) */
    --tdy-green-50:  #f0fdf4;
    --tdy-green-100: #dcfce7;
    --tdy-green-200: #bbf7d0;
    --tdy-green-300: #86efac;
    --tdy-green-400: #4ade80;
    --tdy-green-500: #22c55e;
    --tdy-green-600: #16a34a;
    --tdy-green-700: #15803d;
    --tdy-green-800: #166534;
    --tdy-green-900: #14532d;

    /* Red (error / destructive) */
    --tdy-red-50:  #fef2f2;
    --tdy-red-100: #fee2e2;
    --tdy-red-200: #fecaca;
    --tdy-red-300: #fca5a5;
    --tdy-red-400: #f87171;
    --tdy-red-500: #ef4444;
    --tdy-red-600: #dc2626;
    --tdy-red-700: #b91c1c;
    --tdy-red-800: #991b1b;
    --tdy-red-900: #7f1d1d;

    /* Yellow / Amber (warning / caution) */
    --tdy-yellow-50:  #fefce8;
    --tdy-yellow-100: #fef9c3;
    --tdy-yellow-200: #fef08a;
    --tdy-yellow-300: #fde047;
    --tdy-yellow-400: #facc15;
    --tdy-yellow-500: #eab308;
    --tdy-yellow-600: #ca8a04;
    --tdy-yellow-700: #a16207;
    --tdy-amber-500: #f59e0b;
    --tdy-amber-600: #d97706;

    /* Orange */
    --tdy-orange-50:  #fff7ed;
    --tdy-orange-100: #ffedd5;
    --tdy-orange-400: #fb923c;
    --tdy-orange-500: #f97316;
    --tdy-orange-600: #ea580c;

    /* Purple / Violet */
    --tdy-purple-50:  #faf5ff;
    --tdy-purple-100: #f3e8ff;
    --tdy-purple-400: #a855f7;
    --tdy-purple-500: #8b5cf6;
    --tdy-purple-600: #7c3aed;

    /* Cyan / Teal */
    --tdy-cyan-50:  #ecfeff;
    --tdy-cyan-100: #cffafe;
    --tdy-cyan-400: #22d3ee;
    --tdy-cyan-500: #06b6d4;
    --tdy-cyan-600: #0891b2;
    --tdy-teal-500: #14b8a6;
    --tdy-teal-600: #0d9488;

    /* Indigo */
    --tdy-indigo-50:  #eef2ff;
    --tdy-indigo-100: #e0e7ff;
    --tdy-indigo-500: #6366f1;
    --tdy-indigo-600: #4f46e5;

    /* Pink / Rose */
    --tdy-pink-50:  #fdf2f8;
    --tdy-pink-500: #ec4899;
    --tdy-rose-500: #f43f5e;
}


/* ----------------------------------------------------------------
   SEMANTIC TOKENS — LIGHT MODE (default)
   These are what you reference in components.
   ---------------------------------------------------------------- */
:root {
    /* --- Mode indicator (for JS detection) --- */
    --tdy-color-mode: 'light';

    /* --- Backgrounds --- */
    --tdy-bg-app:           var(--tdy-slate-50);
    --tdy-bg-surface:       #ffffff;
    --tdy-bg-surface-alt:   var(--tdy-slate-100);
    --tdy-bg-hover:         var(--tdy-slate-200);
    --tdy-bg-selected:      var(--tdy-blue-50);
    --tdy-bg-overlay:       rgba(0, 0, 0, 0.4);
    --tdy-bg-input:         #ffffff;
    --tdy-bg-input-hover:   var(--tdy-slate-50);
    --tdy-bg-muted:         var(--tdy-slate-100);

    /* --- Text --- */
    --tdy-text-primary:     var(--tdy-slate-900);
    --tdy-text-secondary:   var(--tdy-slate-600);
    --tdy-text-muted:       var(--tdy-slate-400);
    --tdy-text-inverse:     #ffffff;
    --tdy-text-on-primary:  #ffffff;

    /* --- Borders --- */
    --tdy-border-default:   var(--tdy-slate-200);
    --tdy-border-subtle:    var(--tdy-slate-100);
    --tdy-border-strong:    var(--tdy-slate-300);
    --tdy-border-focus:     var(--tdy-blue-600);

    /* --- Brand / Primary --- */
    --tdy-primary:          var(--tdy-blue-600);
    --tdy-primary-hover:    var(--tdy-blue-700);
    --tdy-primary-light:    var(--tdy-blue-100);
    --tdy-primary-lighter:  var(--tdy-blue-50);
    --tdy-primary-text:     var(--tdy-blue-800);
    --tdy-primary-glow:     rgba(37, 99, 235, 0.15);

    /* --- Status / Feedback --- */
    --tdy-success:          var(--tdy-green-500);
    --tdy-success-bg:       var(--tdy-green-50);
    --tdy-success-text:     var(--tdy-green-700);
    --tdy-warning:          var(--tdy-yellow-500);
    --tdy-warning-bg:       var(--tdy-yellow-50);
    --tdy-warning-text:     var(--tdy-yellow-700);
    --tdy-error:            var(--tdy-red-500);
    --tdy-error-bg:         var(--tdy-red-50);
    --tdy-error-text:       var(--tdy-red-700);
    --tdy-info:             var(--tdy-cyan-500);
    --tdy-info-bg:          var(--tdy-cyan-50);
    --tdy-info-text:        var(--tdy-cyan-700);

    /* --- Shadows --- */
    --tdy-shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
    --tdy-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --tdy-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --tdy-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --tdy-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --tdy-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* --- Spacing scale (0.25rem = 4px base unit) --- */
    --tdy-space-px:   1px;
    --tdy-space-0:    0;
    --tdy-space-0\.5: 0.125rem;  /* 2px */
    --tdy-space-1:    0.25rem;   /* 4px */
    --tdy-space-1\.5: 0.375rem;  /* 6px */
    --tdy-space-2:    0.5rem;    /* 8px */
    --tdy-space-2\.5: 0.625rem;  /* 10px */
    --tdy-space-3:    0.75rem;   /* 12px */
    --tdy-space-3\.5: 0.875rem;  /* 14px */
    --tdy-space-4:    1rem;      /* 16px */
    --tdy-space-5:    1.25rem;   /* 20px */
    --tdy-space-6:    1.5rem;    /* 24px */
    --tdy-space-7:    1.75rem;   /* 28px */
    --tdy-space-8:    2rem;      /* 32px */
    --tdy-space-9:    2.25rem;   /* 36px */
    --tdy-space-10:   2.5rem;    /* 40px */
    --tdy-space-11:   2.75rem;   /* 44px */
    --tdy-space-12:   3rem;      /* 48px */
    --tdy-space-14:   3.5rem;    /* 56px */
    --tdy-space-16:   4rem;      /* 64px */
    --tdy-space-20:   5rem;      /* 80px */
    --tdy-space-24:   6rem;      /* 96px */
    --tdy-space-32:   8rem;      /* 128px */

    /* --- Typography --- */
    --tdy-font-sans:  'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --tdy-font-mono:  'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    --tdy-text-2xs:   0.625rem;  /* 10px */
    --tdy-text-xs:    0.75rem;   /* 12px */
    --tdy-text-sm:    0.875rem;  /* 14px */
    --tdy-text-base:  1rem;      /* 16px */
    --tdy-text-lg:    1.125rem;  /* 18px */
    --tdy-text-xl:    1.25rem;   /* 20px */
    --tdy-text-2xl:   1.5rem;    /* 24px */
    --tdy-text-3xl:   1.875rem;  /* 30px */
    --tdy-text-4xl:   2.25rem;   /* 36px */

    --tdy-leading-none:    1;
    --tdy-leading-tight:   1.25;
    --tdy-leading-snug:    1.375;
    --tdy-leading-normal:  1.5;
    --tdy-leading-relaxed: 1.625;

    --tdy-tracking-tight:  -0.025em;
    --tdy-tracking-normal: 0;
    --tdy-tracking-wide:   0.025em;
    --tdy-tracking-wider:  0.05em;
    --tdy-tracking-widest: 0.1em;

    /* --- Border radius --- */
    --tdy-radius-none: 0;
    --tdy-radius-sm:   0.125rem;  /* 2px */
    --tdy-radius-md:   0.375rem;  /* 6px */
    --tdy-radius-lg:   0.5rem;    /* 8px */
    --tdy-radius-xl:   0.75rem;   /* 12px */
    --tdy-radius-2xl:  1rem;      /* 16px */
    --tdy-radius-3xl:  1.5rem;    /* 24px */
    --tdy-radius-full: 9999px;

    /* --- Transitions --- */
    --tdy-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --tdy-ease-in:     cubic-bezier(0.4, 0, 1, 1);
    --tdy-ease-out:    cubic-bezier(0, 0, 0.2, 1);
    --tdy-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --tdy-duration-75:  75ms;
    --tdy-duration-100: 100ms;
    --tdy-duration-150: 150ms;
    --tdy-duration-200: 200ms;
    --tdy-duration-300: 300ms;
    --tdy-duration-500: 500ms;

    /* --- Z-index scale --- */
    --tdy-z-0:        0;
    --tdy-z-10:       10;
    --tdy-z-20:       20;
    --tdy-z-30:       30;
    --tdy-z-40:       40;
    --tdy-z-50:       50;
    --tdy-z-dropdown: 50;
    --tdy-z-sticky:   100;
    --tdy-z-sidebar:  150;
    --tdy-z-overlay:  200;
    --tdy-z-modal:    210;
    --tdy-z-popover:  300;
    --tdy-z-toast:    400;
    --tdy-z-max:      9999;
}


/* ----------------------------------------------------------------
   SEMANTIC TOKENS — DARK MODE
   Activated by .dark class or data-theme="dark" attribute.
   ---------------------------------------------------------------- */
.dark,
[data-theme="dark"] {
    --tdy-color-mode: 'dark';

    /* Backgrounds */
    --tdy-bg-app:           var(--tdy-slate-900);
    --tdy-bg-surface:       var(--tdy-slate-800);
    --tdy-bg-surface-alt:   var(--tdy-slate-700);
    --tdy-bg-hover:         var(--tdy-slate-600);
    --tdy-bg-selected:      rgba(59, 130, 246, 0.15);
    --tdy-bg-overlay:       rgba(0, 0, 0, 0.7);
    --tdy-bg-input:         var(--tdy-slate-800);
    --tdy-bg-input-hover:   var(--tdy-slate-700);
    --tdy-bg-muted:         var(--tdy-slate-700);

    /* Text */
    --tdy-text-primary:     var(--tdy-slate-50);
    --tdy-text-secondary:   var(--tdy-slate-300);
    --tdy-text-muted:       var(--tdy-slate-500);
    --tdy-text-inverse:     var(--tdy-slate-900);

    /* Borders */
    --tdy-border-default:   var(--tdy-slate-700);
    --tdy-border-subtle:    var(--tdy-slate-800);
    --tdy-border-strong:    var(--tdy-slate-600);
    --tdy-border-focus:     var(--tdy-blue-500);

    /* Brand */
    --tdy-primary:          var(--tdy-blue-500);
    --tdy-primary-hover:    var(--tdy-blue-400);
    --tdy-primary-light:    rgba(59, 130, 246, 0.2);
    --tdy-primary-lighter:  rgba(59, 130, 246, 0.1);
    --tdy-primary-text:     var(--tdy-blue-300);
    --tdy-primary-glow:     rgba(59, 130, 246, 0.2);

    /* Status */
    --tdy-success:          var(--tdy-green-400);
    --tdy-success-bg:       rgba(34, 197, 94, 0.15);
    --tdy-success-text:     var(--tdy-green-300);
    --tdy-warning:          var(--tdy-yellow-400);
    --tdy-warning-bg:       rgba(234, 179, 8, 0.15);
    --tdy-warning-text:     var(--tdy-yellow-300);
    --tdy-error:            var(--tdy-red-400);
    --tdy-error-bg:         rgba(239, 68, 68, 0.15);
    --tdy-error-text:       var(--tdy-red-300);
    --tdy-info:             var(--tdy-cyan-400);
    --tdy-info-bg:          rgba(6, 182, 212, 0.15);
    --tdy-info-text:        var(--tdy-cyan-300);

    /* Shadows (reduced in dark mode) */
    --tdy-shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.2);
    --tdy-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --tdy-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --tdy-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    --tdy-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.15);
    --tdy-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}


/* ----------------------------------------------------------------
   FORCED LIGHT MODE (when user explicitly selects light)
   Ensures light mode wins even if OS prefers dark.
   ---------------------------------------------------------------- */
html:not(.dark),
[data-theme="light"] {
    --tdy-color-mode: 'light';
}