/* ============================================================================
   Phone Repair — Redesign · Design Tokens
   Auto-generated by the Designer Agent. Single source of truth for all agents.
   Style: modern · Density: comfortable · Motion: moderate
   Brand: violet voltage (#7C3AED / #4C1D95 / #A78BFA) on a deep violet-black
   canvas, with an electric-cyan diagnostics accent. Font: Inter.
   ============================================================================ */

:root {
    /* ---- Colors · Primary (violet — client brand) --------------------------
       #A78BFA → 400 · #7C3AED → 600 · #4C1D95 → 900 */
    --color-primary-50:  #f5f3ff;
    --color-primary-100: #ede9fe;
    --color-primary-200: #ddd6fe;
    --color-primary-300: #c4b5fd;
    --color-primary-400: #a78bfa;
    --color-primary-500: #8b5cf6;
    --color-primary-600: #7c3aed;
    --color-primary-700: #6d28d9;
    --color-primary-800: #5b21b6;
    --color-primary-900: #4c1d95;
    --color-primary-rgb: 124, 58, 237;

    /* ---- Colors · Accent (electric cyan — CTAs, diagnostics highlights) ---- */
    --color-accent-50:  #ecfeff;
    --color-accent-100: #cffafe;
    --color-accent-200: #a5f3fc;
    --color-accent-300: #67e8f9;
    --color-accent-400: #22d3ee;
    --color-accent-500: #06b6d4;
    --color-accent-600: #0891b2;
    --color-accent-700: #0e7490;
    --color-accent-800: #155e75;
    --color-accent-900: #164e63;
    --color-accent-rgb: 6, 182, 212;

    /* ---- Colors · Neutral (cool, violet-tinted — never pure gray) ---------- */
    --color-neutral-50:  #faf9fc;
    --color-neutral-100: #f3f1f8;
    --color-neutral-200: #e7e3ef;
    --color-neutral-300: #d4cee0;
    --color-neutral-400: #a49bb5;
    --color-neutral-500: #746b85;
    --color-neutral-600: #564d66;
    --color-neutral-700: #423a50;
    --color-neutral-800: #292233;
    --color-neutral-900: #1a1520;

    /* ---- Colors · Dark surface roles (adopted from reference structure) ---- */
    --color-canvas:              #16111f; /* page floor (near-black, violet cast) */
    --color-canvas-deep:         #0d0a13; /* deepest wells, code/terminal panels  */
    --color-surface-card:        #201a2b; /* cards resting on the canvas          */
    --color-surface-card-elev:   #2c2438; /* hovered / raised cards               */
    --color-surface-strong:      #382e46; /* inputs, chips, controls              */
    --color-hairline:            #2e2740; /* borders on dark                      */
    --color-hairline-soft:       #241d31; /* faint dividers on dark               */

    /* ---- Colors · Text roles ---------------------------------------------- */
    --color-text:            var(--color-neutral-900); /* body on light          */
    --color-text-muted:      var(--color-neutral-500); /* captions / meta        */
    --color-text-on-dark:    #ffffff;                  /* headings on dark        */
    --color-body-on-dark:    #b9b1c7;                  /* body on dark            */
    --color-muted-on-dark:   #8a8199;                  /* meta on dark            */
    --color-on-primary:      #ffffff;                  /* text over primary-600   */
    --color-on-accent:       #06202b;                  /* dark ink over cyan CTA  */

    /* ---- Colors · Backgrounds --------------------------------------------- */
    --color-bg:        var(--color-neutral-50);
    --color-bg-subtle: var(--color-neutral-100);

    /* ---- Colors · Semantic ------------------------------------------------- */
    --color-success: #16a34a;
    --color-warning: #d97706;
    --color-error:   #dc2626;
    --color-info:    #2563eb;

    /* ---- Typography · Families --------------------------------------------- */
    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* ---- Typography · Scale (1.25 · comfortable) --------------------------- */
    --text-xs:   0.75rem;   /* 12px */
    --text-sm:   0.875rem;  /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg:   1.25rem;   /* 20px */
    --text-xl:   1.5rem;    /* 24px */
    --text-2xl:  1.875rem;  /* 30px */
    --text-3xl:  2.5rem;    /* 40px */
    --text-4xl:  3.25rem;   /* 52px */
    --text-display: clamp(2.75rem, 6vw, 4.5rem); /* hero anchor */

    /* ---- Typography · Weights --------------------------------------------- */
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* ---- Typography · Tracking & leading ---------------------------------- */
    --letter-tighter: -0.03em; /* display headlines            */
    --letter-tight:   -0.02em; /* headings                     */
    --letter-normal:  0;       /* body                         */
    --letter-wide:    0.08em;  /* uppercase labels / eyebrows  */
    --leading-tight:  1.15;
    --leading-snug:   1.3;
    --leading-normal: 1.65;
    --leading-relaxed: 1.75;
    --measure: 65ch; /* max body line length */

    /* ---- Spacing (8px grid) ------------------------------------------------ */
    --space-0:  0;
    --space-1:  0.25rem;  /* 4px  */
    --space-2:  0.5rem;   /* 8px  */
    --space-3:  0.75rem;  /* 12px */
    --space-4:  1rem;     /* 16px */
    --space-5:  1.25rem;  /* 20px */
    --space-6:  1.5rem;   /* 24px */
    --space-8:  2rem;     /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */
    --space-32: 8rem;     /* 128px */
    --space-section: clamp(4rem, 8vw, 7rem); /* comfortable */

    /* ---- Border radius (modern — md default, lg cards) -------------------- */
    --radius-none: 0;
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-full: 9999px;

    /* ---- Borders ----------------------------------------------------------- */
    --border-width: 1px;
    --border-color: var(--color-neutral-200);

    /* ---- Shadows (ultra-diffuse; violet-tinted glow) ---------------------- */
    --shadow-sm:    0 1px 2px rgba(26, 21, 32, 0.04);
    --shadow-md:    0 4px 12px rgba(26, 21, 32, 0.06);
    --shadow-lg:    0 8px 24px rgba(26, 21, 32, 0.08);
    --shadow-xl:    0 16px 48px rgba(26, 21, 32, 0.10);
    --shadow-inner: inset 0 1px 3px rgba(26, 21, 32, 0.06);
    --shadow-glow:  0 0 32px rgba(var(--color-primary-rgb), 0.28);
    --shadow-glow-accent: 0 0 28px rgba(var(--color-accent-rgb), 0.30);

    /* ---- Motion (moderate) ------------------------------------------------- */
    --duration-fast:   150ms;
    --duration-normal: 300ms;
    --duration-slow:   500ms;
    --duration-slower: 700ms;
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in:      cubic-bezier(0.4, 0, 1, 1);
    --ease-out:     cubic-bezier(0, 0, 0.2, 1);
    --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ---- Layout ------------------------------------------------------------ */
    --container-max:     1200px;
    --container-wide:    1360px;
    --container-narrow:  760px;
    --container-padding: 1.5rem;
    --nav-height:        64px;
}

/* Optional dark-first hero/section shell: apply .on-dark to any section that
   should sit on the violet-black canvas (the brand's signature surface). */
.on-dark {
    background-color: var(--color-canvas);
    color: var(--color-body-on-dark);
    --border-color: var(--color-hairline);
    --color-bg: var(--color-canvas);
    --color-text: var(--color-body-on-dark);
    --color-text-muted: var(--color-muted-on-dark);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast:   0ms;
        --duration-normal: 0ms;
        --duration-slow:   0ms;
        --duration-slower: 0ms;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}