/* ============================================================================
   TradeYoke marketing design tokens — mirrors the REAL app themes so the site
   and its embedded prototype look identical to the product.

   Two selectable platform themes, exactly as shipped in the app
   (TradeYoke.Shared/wwwroot/themes/{trusty,graft}.css):

     [data-theme="trusty"]  Trusty — clean, calm, spec-true SaaS (light, blue-led)
     [data-theme="graft"]   Graft  — rugged, high-contrast, built for the van (dark)

   Layered on top, the multi-domain palette (§5 UI-Design) re-points the primary
   per trade within a [data-module] scope:

     [data-module="window-cleaning"]  blue   #1E6FD9
     [data-module="gardening"]        green  #2E9E4F

   Components reference ONLY semantic --ty-* tokens. The theme + domain layers
   re-point them; nothing is hard-coded per screen.
   ============================================================================ */

:root {
  /* ---- Scales that never change with theme ---- */

  /* Spacing (4 → 112) */
  --ty-space-xs: 4px;
  --ty-space-sm: 8px;
  --ty-space-md: 12px;
  --ty-space-lg: 16px;
  --ty-space-xl: 24px;
  --ty-space-2xl: 32px;
  --ty-space-3xl: 48px;
  --ty-space-4xl: 72px;
  --ty-space-5xl: 112px;

  /* Typography */
  --ty-font-base: 'Helvetica Neue', Helvetica, Arial, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ty-font-mono: ui-monospace, Menlo, Consolas, monospace;
  --ty-font-size-xs: 12px;
  --ty-font-size-sm: 14px;
  --ty-font-size-md: 16px;
  --ty-font-size-lg: 20px;
  --ty-font-size-xl: 24px;
  --ty-font-size-2xl: 32px;
  --ty-font-size-3xl: 44px;
  --ty-font-size-4xl: 60px;
  /* app-style aliases (used by the prototype, ported from scheduling.css) */
  --ty-font-xs: 12px; --ty-font-sm: 14px; --ty-font-base-size: 16px;
  --ty-font-lg: 20px; --ty-font-xl: 24px; --ty-font-2xl: 32px;
  --ty-weight-regular: 400;
  --ty-weight-medium: 500;
  --ty-weight-semibold: 600;
  --ty-weight-bold: 700;
  --ty-leading-body: 1.6;
  --ty-leading-heading: 1.12;
  --ty-line-body: 1.5;
  --ty-line-heading: 1.25;
  --ty-tracking-tight: -0.02em;
  --ty-tracking-wide: 0.12em;

  /* Motion */
  --ty-motion-micro: 120ms;
  --ty-motion-standard: 200ms;
  --ty-ease: cubic-bezier(.2, .7, .3, 1);

  /* Layout */
  --ty-container: 1160px;
  --ty-container-narrow: 820px;

  /* Z-index */
  --ty-z-nav: 100; --ty-z-sticky: 200; --ty-z-dropdown: 300;
  --ty-z-modal: 400; --ty-z-toast: 500;

  color-scheme: light;
}

/* ============================================================================
   THEME · TRUSTY (light) — the default. Values mirror themes/trusty.css.
   Also applied to :root so a page that never sets data-theme still renders.
   ============================================================================ */
:root,
[data-theme="trusty"] {
  --ty-domain-window-cleaning: #1E6FD9;
  --ty-domain-gardening:       #2E9E4F;
  --ty-domain-scaffolding:     #D98A1E;
  --ty-domain-electrician:     #7C3AED;
  --ty-domain-plumber:         #0891B2;
  --ty-domain-solar-installer: #EA580C;

  --ty-color-primary:          #1E6FD9;
  --ty-color-primary-ink:      #1457b0;
  --ty-color-primary-strong:   #1457b0;   /* alias of -ink for marketing links/hovers */
  --ty-color-primary-soft:     #eaf2fd;
  --ty-color-primary-softer:   #f3f8fe;
  --ty-color-primary-contrast: #ffffff;
  --ty-color-accent:           #1457b0;
  /* Light tint of primary for use ON the always-dark --ty-color-ink surfaces
     (hero/cta-band/footer eyebrows) — never plain primary, which is too dark
     to read against ink. Re-pointed per [data-module] below. */
  --ty-color-primary-onink:    #7fc0ff;

  --ty-color-surface:    #ffffff;
  --ty-color-surface-2:  #f6f8fa;
  --ty-color-surface-3:  #eef1f4;
  --ty-color-ink:        #0b1f33;   /* deep brand ink for hero / footer / cta band */

  --ty-color-text:            #1c2128;
  --ty-color-text-muted:      #57606a;
  --ty-color-text-subtle:     #8a95a1;
  --ty-color-text-onink:      #e6edf3;
  --ty-color-text-onink-muted:#9fb0c0;

  --ty-color-border:        #e7ebf0;
  --ty-color-border-soft:    #eef1f4;
  --ty-color-border-strong: #d0d7de;

  --ty-color-success:      #26b050; --ty-color-success-ink: #1a7f37; --ty-color-success-soft: #e6f6ea;
  --ty-color-warning:      #D98A1E; --ty-color-warning-ink: #9a5b00; --ty-color-warning-soft: #fdf1dd;
  --ty-color-danger:       #e50000; --ty-color-danger-ink:  #b32121; --ty-color-danger-soft:  #fdecec;
  --ty-color-info:         #1457b0; --ty-color-info-ink:    #1457b0; --ty-color-info-soft:    #eaf2fd;

  --ty-radius-control: 8px;
  --ty-radius-card:    14px;
  --ty-radius-panel:   16px;
  --ty-radius-lg:      22px;
  --ty-radius-pill:    999px;

  --ty-shadow-sm: 0 1px 2px rgba(11, 31, 51, .06), 0 1px 3px rgba(11, 31, 51, .08);
  --ty-shadow-md: 0 4px 12px rgba(11, 31, 51, .10), 0 2px 4px rgba(11, 31, 51, .06);
  --ty-shadow-lg: 0 18px 48px rgba(11, 31, 51, .16), 0 6px 14px rgba(11, 31, 51, .08);
  --ty-shadow-primary: 0 12px 30px color-mix(in srgb, var(--ty-color-primary) 32%, transparent);

  --ty-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ty-color-primary) 45%, transparent);
}

/* ============================================================================
   THEME · GRAFT (dark) — rugged, high-contrast, squarer. Mirrors themes/graft.css.
   ============================================================================ */
[data-theme="graft"] {
  color-scheme: dark;

  --ty-domain-window-cleaning: #1E6FD9;
  --ty-domain-gardening:       #2E9E4F;
  --ty-domain-scaffolding:     #D98A1E;
  --ty-domain-electrician:     #7C3AED;
  --ty-domain-plumber:         #0891B2;
  --ty-domain-solar-installer: #EA580C;

  --ty-color-primary:          #2f7ce0;
  --ty-color-primary-ink:      #5aa0f0;
  --ty-color-primary-strong:   #5aa0f0;
  --ty-color-primary-soft:     #10243c;
  --ty-color-primary-softer:   #0e1f31;
  --ty-color-primary-contrast: #ffffff;
  --ty-color-accent:           #5aa0f0;
  --ty-color-primary-onink:    #5aa0f0;

  --ty-color-surface:    #16202b;   /* cards, nav, top bar (slate) */
  --ty-color-surface-2:  #0f1720;   /* page background (darker) */
  --ty-color-surface-3:  #23303d;   /* inset controls */
  --ty-color-ink:        #0b131b;   /* hero / footer — deepest slate */

  --ty-color-text:            #f2f6fa;
  --ty-color-text-muted:      #9aa7b4;
  --ty-color-text-subtle:     #7e8b99;
  --ty-color-text-onink:      #e7eef5;
  --ty-color-text-onink-muted:#94a3b2;

  --ty-color-border:        #23303d;
  --ty-color-border-soft:    #1c2836;
  --ty-color-border-strong: #3a4c5e;

  --ty-color-success:      #26b050; --ty-color-success-ink: #3fbf63; --ty-color-success-soft: #14331f;
  --ty-color-warning:      #D98A1E; --ty-color-warning-ink: #e2a955; --ty-color-warning-soft: #3a2c10;
  --ty-color-danger:       #e5484d; --ty-color-danger-ink:  #ff6b6b; --ty-color-danger-soft:  #3a1518;
  --ty-color-info:         #5aa0f0; --ty-color-info-ink:    #5aa0f0; --ty-color-info-soft:    #10243c;

  --ty-radius-control: 4px;
  --ty-radius-card:    4px;
  --ty-radius-panel:   6px;
  --ty-radius-lg:      6px;
  --ty-radius-pill:    3px;

  --ty-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ty-shadow-md: 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --ty-shadow-lg: 0 24px 50px -24px rgba(0, 0, 0, 0.7);
  --ty-shadow-primary: 0 12px 30px -12px rgba(47, 124, 224, 0.5);

  --ty-focus-ring: 0 0 0 0.2rem rgba(90, 160, 240, 0.45);
}

/* ============================================================================
   Layer 2 · domain module palettes — re-point primary within a [data-module]
   scope, per theme. Mirrors the app's theme files.
   ============================================================================ */

/* Trusty (light tints). Also applied bare so themeless pages still colour. */
:root [data-module="window-cleaning"],
[data-theme="trusty"] [data-module="window-cleaning"] { --ty-color-primary: #1E6FD9; --ty-color-primary-ink: #1457b0; --ty-color-primary-strong: #1457b0; --ty-color-primary-soft: #eef4fd; --ty-color-primary-onink: #7fc0ff; }
:root [data-module="gardening"],
[data-theme="trusty"] [data-module="gardening"]       { --ty-color-primary: #2E9E4F; --ty-color-primary-ink: #1f7a38; --ty-color-primary-strong: #1f7a38; --ty-color-primary-soft: #e8f5ec; --ty-color-primary-onink: #8fe3ab; }
:root [data-module="scaffolding"],
[data-theme="trusty"] [data-module="scaffolding"]     { --ty-color-primary: #D98A1E; --ty-color-primary-ink: #a5670f; --ty-color-primary-strong: #a5670f; --ty-color-primary-soft: #fbf0db; --ty-color-primary-onink: #f3c583; }
:root [data-module="electrician"],
[data-theme="trusty"] [data-module="electrician"]     { --ty-color-primary: #7C3AED; --ty-color-primary-ink: #5b21b6; --ty-color-primary-strong: #5b21b6; --ty-color-primary-soft: #f1ebfd; --ty-color-primary-onink: #cbb6fa; }
:root [data-module="plumber"],
[data-theme="trusty"] [data-module="plumber"]         { --ty-color-primary: #0891B2; --ty-color-primary-ink: #075e73; --ty-color-primary-strong: #075e73; --ty-color-primary-soft: #e2f4f8; --ty-color-primary-onink: #7fe0f0; }
:root [data-module="solar-installer"],
[data-theme="trusty"] [data-module="solar-installer"] { --ty-color-primary: #EA580C; --ty-color-primary-ink: #b4460b; --ty-color-primary-strong: #b4460b; --ty-color-primary-soft: #fdeee3; --ty-color-primary-onink: #ffb37f; }

/* Graft (dark soft tints). */
[data-theme="graft"] [data-module="window-cleaning"] { --ty-color-primary: #1E6FD9; --ty-color-primary-ink: #5aa0f0; --ty-color-primary-strong: #5aa0f0; --ty-color-primary-soft: #10243c; --ty-color-primary-onink: #5aa0f0; }
[data-theme="graft"] [data-module="gardening"]       { --ty-color-primary: #2E9E4F; --ty-color-primary-ink: #3fbf63; --ty-color-primary-strong: #3fbf63; --ty-color-primary-soft: #113020; --ty-color-primary-onink: #3fbf63; }
[data-theme="graft"] [data-module="scaffolding"]     { --ty-color-primary: #D98A1E; --ty-color-primary-ink: #e2a955; --ty-color-primary-strong: #e2a955; --ty-color-primary-soft: #33260f; --ty-color-primary-onink: #e2a955; }
[data-theme="graft"] [data-module="electrician"]     { --ty-color-primary: #7C3AED; --ty-color-primary-ink: #a78bfa; --ty-color-primary-strong: #a78bfa; --ty-color-primary-soft: #241a3d; --ty-color-primary-onink: #a78bfa; }
[data-theme="graft"] [data-module="plumber"]         { --ty-color-primary: #0891B2; --ty-color-primary-ink: #22c3e6; --ty-color-primary-strong: #22c3e6; --ty-color-primary-soft: #0d2b33; --ty-color-primary-onink: #22c3e6; }
[data-theme="graft"] [data-module="solar-installer"] { --ty-color-primary: #EA580C; --ty-color-primary-ink: #fb923c; --ty-color-primary-strong: #fb923c; --ty-color-primary-soft: #3a2110; --ty-color-primary-onink: #fb923c; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}