/* =========================================================================
   Phone Repair — Design Tokens
   Auto-generated by Designer Agent. Single source of truth for all styles.
   Structure adapted from the Airtable reference system (white canvas,
   dark-ink type, signature full-bleed cards, near-black CTA) and re-colored
   to a trustworthy tech teal-blue + urgent amber palette.
   ========================================================================= */

:root {
    /* ---- Color: Primary (tech teal-blue — trust, precision, repair) ---- */
    --color-primary-50:  #edfafc;
    --color-primary-100: #d2f1f6;
    --color-primary-200: #a9e2ec;
    --color-primary-300: #72cbdd;
    --color-primary-400: #38accb;
    --color-primary-500: #178fb1;
    --color-primary-600: #107393;
    --color-primary-700: #135d78;
    --color-primary-800: #164d63;
    --color-primary-900: #164054;
    --color-primary-rgb: 23, 143, 177;

    /* ---- Color: Accent (warm amber — speed, same-day, warranty) ---- */
    --color-accent-50:  #fef6ec;
    --color-accent-100: #fce8cd;
    --color-accent-200: #f9cf96;
    --color-accent-300: #f5b25c;
    --color-accent-400: #f19733;
    --color-accent-500: #e77e18;
    --color-accent-600: #cc6210;
    --color-accent-700: #a94a11;
    --color-accent-800: #893c15;
    --color-accent-900: #713314;
    --color-accent-rgb: 231, 126, 24;

    /* ---- Color: Neutral (cool-leaning warm gray to pair with cool primary) ---- */
    --color-neutral-50:  #f7f9fa;
    --color-neutral-100: #eef1f4;
    --color-neutral-200: #e0e4e9;
    --color-neutral-300: #c9cfd6;
    --color-neutral-400: #9aa2ac;
    --color-neutral-500: #6b727c;
    --color-neutral-600: #4f555e;
    --color-neutral-700: #3a3f47;
    --color-neutral-800: #23272e;
    --color-neutral-900: #15181d;

    /* ---- Color: Signature (full-bleed feature cards) ---- */
    --color-signature-electric: #0b7597;
    --color-signature-ink:      #15181d;
    --color-signature-amber:    #e77e18;
    --color-signature-mint:     #bfe6d6;
    --color-signature-cream:    #f5efe4;

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

    /* ---- Color: Surface & text roles ---- */
    --color-canvas:              #ffffff;
    --color-surface-soft:        #f7f9fa;
    --color-surface-strong:      #e0e4e9;
    --color-surface-dark:        #15181d;
    --color-surface-dark-elev:   #23272e;
    --color-hairline:            #e0e4e9;
    --color-border-strong:       #9aa2ac;
    --color-ink:                 #15181d;
    --color-body:                #3a3f47;
    --color-muted:               #6b727c;
    --color-on-primary:          #ffffff;
    --color-on-dark:             #ffffff;
    --color-cta:                 #15181d;
    --color-cta-active:          #0b0d10;
    --color-link:                #107393;
    --color-link-active:         #164054;

    /* ---- Typography ---- */
    --font-heading: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
    --font-body:    'DM Sans', ui-sans-serif, system-ui, sans-serif;

    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg:   1.25rem;    /* 20px */
    --text-xl:   1.5625rem;  /* 25px */
    --text-2xl:  1.953rem;   /* 31px */
    --text-3xl:  2.441rem;   /* 39px */
    --text-4xl:  3.052rem;   /* 49px */

    --letter-tight:  -0.03em;
    --letter-snug:   -0.02em;
    --letter-normal: 0;
    --letter-wide:   0.05em;

    --leading-tight:   1.15;
    --leading-snug:    1.3;
    --leading-normal:  1.65;
    --leading-relaxed: 1.75;

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

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

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

    /* ---- Shadows (ultra-diffuse, tinted with warm-ink) ---- */
    --shadow-sm:    0 1px 2px rgba(21, 24, 29, 0.04);
    --shadow-md:    0 4px 12px rgba(21, 24, 29, 0.06);
    --shadow-lg:    0 8px 24px rgba(21, 24, 29, 0.08);
    --shadow-xl:    0 16px 48px rgba(21, 24, 29, 0.10);
    --shadow-inner: inset 0 1px 3px rgba(21, 24, 29, 0.06);
    --shadow-glow:  0 0 24px rgba(var(--color-primary-rgb), 0.18);

    /* ---- 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:     1280px;
    --container-padding: 1.5rem;
    --nav-height:        68px;
}

@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;
    }
}