/* =============================================================================
 * Servly — Design Tokens
 * Three-layer architecture: primitive → semantic → component
 *
 * Source of truth for ALL color, spacing, type, motion, radius, and shadow.
 * Every other CSS file in /css consumes from here via var(--*).
 *
 * Theme: light marketplace (Indeed/Upwork structure, Trinidad & Caribbean
 * identity). Brand triad:
 *   - Indigo  #4D47FE  primary  (buttons, links, brand)
 *   - Coral   #FF6A3D  accent   (highlights, energy, secondary CTAs)
 *   - Teal    #0FB5A4  trust    (verified, available, success)
 *   - Ink     #101724  text/headings/footer
 *
 * Layer 1 (--c-*, --s-*, --t-*, etc.)  — raw values, never used directly.
 * Layer 2 (--color-*, --space-*, ...)  — purpose aliases. Use these by default.
 * Layer 3 (--btn-*, --nav-*, --card-*) — component-specific overrides.
 * ========================================================================== */

:root {
    /* ─────────────────────────────────────────────────────────────────────
       LAYER 1 — PRIMITIVES
       Raw scale values. Do not reference these from component CSS.
       ───────────────────────────────────────────────────────────────────── */

    /* Indigo — Servly primary brand (#4D47FE is the anchor) */
    --c-indigo-50:   #eeedff;
    --c-indigo-100:  #e0deff;
    --c-indigo-200:  #c5c2ff;
    --c-indigo-300:  #a29dff;
    --c-indigo-400:  #7b74ff;
    --c-indigo-500:  #4d47fe;   /* BRAND */
    --c-indigo-600:  #3e38e6;   /* hover */
    --c-indigo-700:  #322dc2;   /* active */
    --c-indigo-800:  #28249c;
    --c-indigo-900:  #1e1b73;

    /* Coral — warm Caribbean sun accent */
    --c-coral-50:    #fff1ec;
    --c-coral-100:   #ffe0d5;
    --c-coral-200:   #ffc4b0;
    --c-coral-300:   #ffa585;
    --c-coral-400:   #ff855e;
    --c-coral-500:   #ff6a3d;   /* accent */
    --c-coral-600:   #ed5424;   /* hover */
    --c-coral-700:   #c3401a;

    /* Teal — Caribbean sea / trust + verified */
    --c-teal-50:     #e6faf7;
    --c-teal-100:    #c5f2eb;
    --c-teal-200:    #93e6da;
    --c-teal-300:    #5fd9c9;
    --c-teal-500:    #0fb5a4;   /* trust */
    --c-teal-600:    #0c9587;
    --c-teal-700:    #0a766b;

    /* Neutral scale (slate, light theme — ink anchored at #101724) */
    --c-neutral-0:    #ffffff;   /* page bg, cards */
    --c-neutral-50:   #f7f8fa;   /* subtle section bg */
    --c-neutral-100:  #f1f3f7;
    --c-neutral-150:  #e9ecf2;
    --c-neutral-200:  #e2e6ed;   /* borders */
    --c-neutral-300:  #cbd2dd;   /* strong borders */
    --c-neutral-400:  #9aa4b2;   /* muted icons */
    --c-neutral-500:  #6b7685;   /* muted text */
    --c-neutral-600:  #4a5567;   /* secondary text */
    --c-neutral-700:  #344256;
    --c-neutral-800:  #1f2a3c;
    --c-neutral-900:  #101724;   /* INK — primary text / headings / footer */
    --c-neutral-1000: #0a0e18;

    /* Status colors */
    --c-success-500: #16a34a;
    --c-success-600: #15803d;
    --c-success-700: #166534;

    --c-error-500:   #e5484d;
    --c-error-600:   #c7373c;
    --c-error-700:   #a32a2e;

    --c-warning-500: #f5a623;
    --c-warning-700: #b45309;

    /* Spacing scale (4px base, geometric) */
    --s-0:   0;
    --s-1:   0.25rem;   /* 4 */
    --s-2:   0.5rem;    /* 8 */
    --s-3:   0.75rem;   /* 12 */
    --s-4:   1rem;      /* 16 */
    --s-5:   1.25rem;   /* 20 */
    --s-6:   1.5rem;    /* 24 */
    --s-8:   2rem;      /* 32 */
    --s-10:  2.5rem;    /* 40 */
    --s-12:  3rem;      /* 48 */
    --s-16:  4rem;      /* 64 */
    --s-20:  5rem;      /* 80 */
    --s-24:  6rem;      /* 96 */

    /* Type scale (modular, 1.25 ratio) */
    --t-xs:   0.75rem;    /* 12 */
    --t-sm:   0.875rem;   /* 14 */
    --t-base: 1rem;       /* 16 */
    --t-lg:   1.125rem;   /* 18 */
    --t-xl:   1.25rem;    /* 20 */
    --t-2xl:  1.5rem;     /* 24 */
    --t-3xl:  1.875rem;   /* 30 */
    --t-4xl:  2.25rem;    /* 36 */
    --t-5xl:  3rem;       /* 48 */
    --t-6xl:  3.75rem;    /* 60 */
    --t-7xl:  4.5rem;     /* 72 */

    /* Font families — modern marketplace: geometric display + neutral body */
    --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'SF Mono', Menlo, Consolas, monospace;

    /* Font weights */
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-black:    800;

    /* Line heights */
    --lh-tight:   1.1;
    --lh-snug:    1.25;
    --lh-normal:  1.5;
    --lh-relaxed: 1.65;

    /* Letter spacing */
    --ls-tighter: -0.02em;
    --ls-tight:   -0.01em;
    --ls-normal:  0;
    --ls-wide:    0.04em;
    --ls-wider:   0.08em;
    --ls-widest:  0.16em;

    /* Radii */
    --r-none: 0;
    --r-sm:   0.375rem;
    --r-md:   0.5rem;
    --r-lg:   0.75rem;
    --r-xl:   1rem;
    --r-2xl:  1.5rem;
    --r-pill: 9999px;
    --r-full: 50%;

    /* Motion */
    --d-fast:   150ms;
    --d-base:   250ms;
    --d-slow:   400ms;
    --e-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --e-inout:  cubic-bezier(0.4, 0, 0.2, 1);

    /* Elevation (soft, ink-tinted shadows for a light surface) */
    --e-shadow-1: 0 1px 2px rgba(16, 23, 36, 0.06);
    --e-shadow-2: 0 2px 4px rgba(16, 23, 36, 0.06), 0 4px 12px rgba(16, 23, 36, 0.05);
    --e-shadow-3: 0 8px 24px rgba(16, 23, 36, 0.10), 0 2px 6px rgba(16, 23, 36, 0.06);
    --e-shadow-4: 0 20px 48px rgba(16, 23, 36, 0.16), 0 8px 16px rgba(16, 23, 36, 0.08);
    --e-shadow-glow: 0 8px 28px rgba(77, 71, 254, 0.28);   /* indigo CTA glow */

    /* Focus ring (a11y) — indigo */
    --focus-ring: 0 0 0 3px rgba(77, 71, 254, 0.35);

    /* ─────────────────────────────────────────────────────────────────────
       LAYER 2 — SEMANTIC ALIASES
       Purpose-named tokens that components consume. Theme-swappable.
       ───────────────────────────────────────────────────────────────────── */

    /* Backgrounds */
    --color-bg:                var(--c-neutral-0);
    --color-bg-secondary:      var(--c-neutral-50);
    --color-bg-deep:           var(--c-neutral-900);   /* ink bands / footer */
    --color-surface:           var(--c-neutral-0);
    --color-surface-elevated:  var(--c-neutral-0);
    --color-surface-sunken:    var(--c-neutral-50);
    --color-overlay:           rgba(16, 23, 36, 0.5);

    /* Foregrounds (text) */
    --color-fg:                var(--c-neutral-900);   /* ink */
    --color-fg-secondary:      var(--c-neutral-600);
    --color-fg-muted:          var(--c-neutral-500);
    --color-fg-inverse:        var(--c-neutral-0);

    /* Borders */
    --color-border:            var(--c-neutral-200);
    --color-border-strong:     var(--c-neutral-300);
    --color-border-subtle:     rgba(16, 23, 36, 0.08);

    /* Brand — indigo primary */
    --color-primary:           var(--c-indigo-500);
    --color-primary-hover:     var(--c-indigo-600);
    --color-primary-active:    var(--c-indigo-700);
    --color-primary-on:        var(--c-neutral-0);
    --color-primary-soft:      var(--c-indigo-50);

    /* Accent — coral */
    --color-accent:            var(--c-coral-500);
    --color-accent-hover:      var(--c-coral-600);
    --color-accent-on:         var(--c-neutral-0);
    --color-accent-soft:       var(--c-coral-50);

    /* Trust — teal (verified, available) */
    --color-trust:             var(--c-teal-600);
    --color-trust-strong:      var(--c-teal-700);
    --color-trust-on:          var(--c-neutral-0);
    --color-trust-soft:        var(--c-teal-50);

    /* Ink (explicit) */
    --color-ink:               var(--c-neutral-900);

    /* Status */
    --color-success:           var(--c-success-600);
    --color-success-bg:        rgba(22, 163, 74, 0.10);
    --color-error:             var(--c-error-600);
    --color-error-bg:          rgba(229, 72, 77, 0.10);
    --color-warning:           var(--c-warning-700);
    --color-warning-bg:        rgba(245, 166, 35, 0.12);

    /* Link */
    --color-link:              var(--c-indigo-600);
    --color-link-hover:        var(--c-indigo-700);

    /* Aliases for legacy classes — keep existing CSS working during migration */
    --primary:           var(--color-primary);
    --primary-hover:     var(--color-primary-hover);
    --secondary:         var(--color-surface-sunken);
    --accent:            var(--color-accent);
    --text:              var(--color-fg);
    --text-light:        var(--color-fg-secondary);
    --text-muted:        var(--color-fg-muted);
    --bg:                var(--color-bg);
    --bg-light:          var(--color-bg-secondary);
    --bg-dark:           var(--color-bg-deep);
    --surface:           var(--color-surface);
    --surface-elevated:  var(--color-surface-elevated);
    --border:            var(--color-border);
    --border-light:      var(--color-border-strong);
    --success:           var(--color-success);
    --error:             var(--color-error);
    --shadow:            var(--e-shadow-1);
    --shadow-md:         var(--e-shadow-2);
    --shadow-lg:         var(--e-shadow-3);
    --shadow-xl:         var(--e-shadow-4);

    /* ─────────────────────────────────────────────────────────────────────
       LAYER 3 — COMPONENT TOKENS
       ───────────────────────────────────────────────────────────────────── */

    /* Nav (white, sticky, ink text) */
    --nav-bg:              rgba(255, 255, 255, 0.96);
    --nav-bg-blur:         rgba(255, 255, 255, 0.82);
    --nav-fg:              var(--color-fg);
    --nav-fg-hover:        var(--color-primary);
    --nav-border:          var(--color-border);
    --nav-shadow:          0 1px 0 rgba(16, 23, 36, 0.06);
    --nav-shadow-scrolled: 0 4px 20px rgba(16, 23, 36, 0.08);
    --nav-height:          72px;
    --nav-logo-height:     34px;

    /* Button — primary (solid indigo, white text) */
    --btn-primary-bg:           var(--color-primary);
    --btn-primary-bg-hover:     var(--color-primary-hover);
    --btn-primary-fg:           var(--color-primary-on);
    --btn-primary-border:       transparent;
    --btn-primary-shadow:       var(--e-shadow-1);
    --btn-primary-shadow-hover: var(--e-shadow-glow);

    /* Button — secondary (white, ink text, border) */
    --btn-secondary-bg:         var(--color-surface);
    --btn-secondary-bg-hover:   var(--color-surface-sunken);
    --btn-secondary-fg:         var(--color-fg);
    --btn-secondary-border:     var(--color-border-strong);

    /* Button — accent (coral) */
    --btn-accent-bg:            var(--color-accent);
    --btn-accent-bg-hover:      var(--color-accent-hover);
    --btn-accent-fg:            var(--color-accent-on);

    /* Card */
    --card-bg:        var(--color-surface);
    --card-border:    var(--color-border);
    --card-radius:    var(--r-xl);
    --card-padding:   var(--s-6);
    --card-shadow:    var(--e-shadow-1);
    --card-shadow-hover: var(--e-shadow-3);

    /* Verified badge */
    --badge-bg:               var(--color-trust-soft);
    --badge-fg:               var(--color-trust-strong);
    --badge-border:           rgba(15, 181, 164, 0.30);

    /* Input */
    --input-bg:               var(--color-surface);
    --input-border:           var(--color-border-strong);
    --input-border-focus:     var(--color-primary);
    --input-fg:               var(--color-fg);
    --input-placeholder:      var(--color-fg-muted);
    --input-radius:           var(--r-md);

    /* Modal */
    --modal-bg:               var(--color-surface);
    --modal-overlay:          rgba(16, 23, 36, 0.55);
    --modal-radius:           var(--r-xl);
    --modal-shadow:           var(--e-shadow-4);
}

/* =============================================================================
 * Accessibility — global focus-visible ring (indigo).
 * ========================================================================== */
*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

.no-focus-ring:focus-visible {
    outline: none;
}

/* =============================================================================
 * Reduced motion — respect OS-level preference
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}