/* Single source of truth for the Got-Us visual identity. */
:root {
  --message-read: #8cddff;
  --message-meta-size: 0.625rem;
  --radius: 1.25rem;
  --background: #f7f8f6;
  --foreground: #1d1d1d;
  --card: #ffffff;
  --card-foreground: #1d1d1d;
  --popover: #ffffff;
  --popover-foreground: #1d1d1d;
  --primary: #1e4d3a;
  --primary-foreground: #f7f8f6;
  --secondary: #a8c5b2;
  --secondary-foreground: #1e4d3a;
  --tertiary: #a8c5b2;
  --muted: #ecefec;
  --muted-foreground: #444444;
  --accent: #e7e2d6;
  --accent-foreground: #1e4d3a;
  --sand: #e7e2d6;
  --destructive: #a4483c;
  --sos-background: #a94343;
  --sos-glow-color: rgb(169 67 67 / 20%);
  --destructive-foreground: #f7f8f6;
  --border: #1e4d3a24;
  --input: #1e4d3a24;
  --ring: #1e4d3a;
  --status-hard: #FF8A85;
  --status-planned: #a64b0b;
  --status-available: #6FD0AC;
  --status-listening: var(--brand-purple-light);
  --status-buddies: #FFAD6B;
  --status-off: #7FB6E6;
  --contact-secondary-surface: rgb(255 255 255 / 20%);
  --contact-secondary-border: #829d8d;
  --contact-primary-border: #527d65;
  --contact-glow-color: rgb(235 255 241 / 30%);
  --contact-glow-duration: 3s;
  --contact-primary-shadow: 0 0 22px 4px var(--contact-glow-color);
  --glass-surface: rgb(210 235 220 / 22%);
  --glass-control: rgb(220 240 228 / 14%);
  --glass-border: rgb(235 250 240 / 24%);
  --glass-text: #ffffff;
  --glass-muted: #e1eee6;
  --glass-shadow: 0 6px 24px rgb(5 35 27 / 8%);
  --app-canvas: #123d34;
  --app-canvas-glow: #72c486;
  --app-canvas-text: #f4f8f5;
  --app-canvas-muted: #c2d7cb;
  --app-texture-color: #b5e4be;
  --app-texture-opacity: .19;
  --app-texture-mask: url("/assets/canvas-folds.svg");
  --app-bg-image:
    radial-gradient(ellipse 72% 48% at 110% -8%, var(--app-canvas-glow) 0%, rgb(91 173 111 / 65%) 28%, rgb(65 143 89 / 20%) 60%, transparent 100%),
    radial-gradient(ellipse 110% 65% at 100% 0%, #388856 0%, transparent 72%),
    radial-gradient(ellipse 100% 62% at -18% 105%, rgb(66 147 114 / 85%) 0%, rgb(38 111 87 / 45%) 42%, transparent 78%),
    linear-gradient(165deg, #164737 0%, var(--app-canvas) 65%, #0b302b 100%);
  --shadow-soft: 0 1px 2px #1e4d3a0a, 0 8px 24px #1e4d3a0a;

  --font-sans: "Rubik", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "Inter", "Manrope", ui-sans-serif, system-ui, sans-serif;
  --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;
  --spacing: var(--space-1);
  --page-width: 28rem;
  --container-md: var(--page-width);
  --page-gutter: var(--space-5);
  --radius-control: 1rem;
  --radius-pill: 999px;
  --tab-bar-height: 55px;
  --control-height: 2.75rem;
  --text-label: 0.75rem;
  --text-body: 0.875rem;
  --text-title: 1.125rem;
  --text-heading: 1.5rem;
  --text-xs: var(--text-label);
  --text-sm: var(--text-body);
  --text-lg: var(--text-title);
  --text-2xl: var(--text-heading);
  --live-background: color-mix(in srgb, var(--secondary) 22%, var(--card));
  --live-border: color-mix(in srgb, var(--primary) 45%, transparent);
  --live-glow: 0 0 8px color-mix(in srgb, var(--secondary) 30%, transparent);
  --motion-fast: 150ms;
  --surface-navigation: #ffffff;
  --surface-soft: var(--glass-surface);
  --surface-control: var(--glass-surface);
  --surface-border: var(--glass-border);
}

/* Shared light canvas and white surfaces across every screen. */
:root {
  --app-canvas: #ffffff;
  --app-canvas-text: #1d1d1d;
  --app-canvas-muted: #1d1d1d;
  --app-texture-color: #2f7659;
  --app-texture-opacity: .38;
  --app-texture-mask: url("/assets/canvas-landscape.svg");
  --app-texture-fade: linear-gradient(to bottom, transparent 24%, #000 72%);
  --app-bg-image:
    radial-gradient(ellipse 55% 65% at 52% 48%, rgb(255 255 255 / 65%) 0%, transparent 100%),
    linear-gradient(to bottom, #ffffff 0%, #fcfdfb 18%, #f0f6ef 37%, #d9e9db 57%, #b3d2ba 78%, #80b396 100%);
  --glass-surface: rgb(255 255 255 / 64%);
  --glass-control: rgb(202 222 209 / 38%);
  --glass-border: rgb(83 130 102 / 18%);
  --glass-text: #1d1d1d;
  --glass-muted: #1d1d1d;
  --glass-shadow: 0 6px 24px rgb(35 78 53 / 4%);
  --contact-secondary-surface: rgb(255 255 255 / 26%);
  --contact-glow-color: rgb(49 147 86 / 27%);
}


/* Independent reference design for Homepage V2. */
:root {
  --wallet-bg: linear-gradient(155deg, #5144bd 0%, #867cf7 36%, #eadcf8 76%);
  --wallet-white: #fff;
  --wallet-ink: #080808;
  --wallet-muted: #737373;
  --wallet-purple: #3834bb;
  --wallet-glass: rgb(255 255 255 / 42%);
  --wallet-line: rgb(255 255 255 / 45%);
  --wallet-transfer: linear-gradient(160deg, #ebe5fd 25%, #fce7e9 100%);
  --wallet-topup: linear-gradient(150deg, #fde3f4 20%, #ffdec3 100%);
  --wallet-payment: linear-gradient(155deg, #cef4ee 10%, #fff9d7 100%);
  --wallet-transfer-ink: #38206e;
  --wallet-topup-ink: #dbae45;
  --wallet-payment-ink: #238137;
  --wallet-shadow: 0 12px 24px rgb(36 28 69 / 10%);
  --wallet-scan-bg: linear-gradient(145deg, #bbcfff, #5564e9);
}

:root {
  --wallet-hero-gradient: var(--wallet-payment);
  --wallet-hero-ink: #193f32;
  --wallet-hero-glass: linear-gradient(125deg, rgb(255 255 255 / 22%), rgb(255 255 255 / 3%) 40%, rgb(255 255 255 / 13%) 74%, rgb(255 255 255 / 26%));
  --wallet-hero-sheen: linear-gradient(125deg, transparent 25%, rgb(255 255 255 / 22%) 47%, transparent 65%);
}

:root {
  --wallet-sos-surface: rgb(255 255 255 / 42%);
  --wallet-sos-border: rgb(255 255 255 / 65%);
}

:root {
  --wallet-wave-base: linear-gradient(135deg, #c8e9ed 0%, #def3dc 52%, #fff1cb 100%);
  --wallet-wave-colors: radial-gradient(ellipse at 18% 22%, #9edcd7 0%, transparent 48%), radial-gradient(ellipse at 84% 18%, #c6d8f2 0%, transparent 44%), radial-gradient(ellipse at 75% 88%, #ffe4ae 0%, transparent 48%), radial-gradient(ellipse at 25% 90%, #c9ebba 0%, transparent 48%);
}

:root {
  --wallet-call-border: rgb(30 77 58 / 45%);
  --wallet-call-surface: #467760;
  --wallet-call-shadow: 0 4px 12px rgb(30 77 58 / 12%);
}

:root { --wallet-buddy-surface: #eff7f2; }

:root {
  --wallet-quote-gradient: var(--wallet-payment);
  --wallet-quote-ink: var(--wallet-hero-ink);
}

:root { --wallet-home-gradient: linear-gradient(145deg, #91c9aa, #467760 65%, #28533f); }

:root {
  --v3-background: linear-gradient(180deg, #629967 0%, #5b9866 25%, #408d5e 43%, #194e33 64%, #082417 100%);
  --v3-shadow: linear-gradient(180deg, #235c39 0%, #10341f 23%, #031009 48%, #000 72%);
}

:root { --v3-glow: radial-gradient(ellipse at 50% 55%, transparent 38%, rgb(157 235 153 / 26%) 70%, transparent 92%); }

:root {
  --v3-control: linear-gradient(160deg, rgb(7 28 18 / 65%), rgb(2 11 6 / 72%));
  --v3-control-accent: #a6e6a7;
  --v3-control-muted: #b3c5b7;
  --v3-control-border: rgb(167 230 175 / 12%);
}


:root {
  --v3-sos-surface: radial-gradient(ellipse at 22% 0%, rgb(179 227 143 / 65%), transparent 65%), linear-gradient(120deg, #6fa34b, #316e3b 65%, #1f542f);
}

:root { --v3-sos-button: #a92532; --v3-sos-glow: 0 0 18px rgb(220 45 60 / 35%); }

:root {
  --v3-nav-surface: rgb(3 18 11 / 82%);
  --v3-nav-home: linear-gradient(145deg, #6ca77c, #27563b);
  --v3-nav-glow: 0 0 20px rgb(132 212 153 / 20%);
}

:root { --wallet-home-ring: #b8e9ca; --wallet-home-glow: 0 0 10px rgb(108 198 144 / 65%), 0 0 24px rgb(108 198 144 / 40%), 0 4px 12px rgb(35 86 60 / 16%); }

:root { --wallet-helping-opacity: .85; }

:root { --wallet-hard-gradient: var(--wallet-topup); --wallet-hard-illustration-opacity: .52; }

:root {
  --v3-landscape-sky: linear-gradient(180deg, #5d897e 0%, #8dac94 22%, #becbb0 32%, #729b88 35%, #426f63 54%, #234d44 76%, #142f2e 100%);
  --v3-landscape-light: radial-gradient(ellipse at 72% 28%, rgb(242 238 200 / 30%), transparent 48%);
  --v3-landscape-water: linear-gradient(180deg, rgb(190 209 172 / 16%), rgb(24 76 66 / 24%) 42%, rgb(10 38 35 / 58%));
  --v3-shore-far: #72988b;
  --v3-shore-middle: #3c6b60;
  --v3-shore-near: #193f3b;
  --v3-ripple: #bad0b4;
  --v3-landscape-scrim: linear-gradient(180deg, rgb(8 36 30 / 16%), transparent 20%, rgb(10 36 31 / 30%) 42%, rgb(7 26 24 / 44%) 100%);
}

:root { --v3-recovery-surface: linear-gradient(160deg, rgb(7 28 18 / 30%), rgb(2 11 6 / 38%)); }

:root { --v3-landscape-opacity: .88; }


/* Homepage V2 is the shared visual language for application screens. */
:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --background: var(--wallet-white);
  --foreground: var(--wallet-ink);
  --card-foreground: var(--wallet-ink);
  --primary: var(--wallet-call-surface);
  --primary-foreground: var(--wallet-white);
  --secondary: #dceee4;
  --secondary-foreground: var(--wallet-hero-ink);
  --muted: var(--wallet-buddy-surface);
  --muted-foreground: #626c67;
  --accent: #e5f3ec;
  --accent-foreground: var(--wallet-hero-ink);
  --border: rgb(70 119 96 / 25%);
  --input: var(--border);
  --ring: var(--wallet-call-surface);
  --glass-surface: var(--wallet-white);
  --glass-control: var(--wallet-buddy-surface);
  --glass-border: var(--border);
  --glass-text: var(--wallet-ink);
  --glass-muted: var(--muted-foreground);
  --glass-shadow: var(--wallet-call-shadow);
  --surface-soft: var(--wallet-buddy-surface);
  --surface-control: var(--wallet-white);
  --app-canvas: var(--wallet-white);
  --app-canvas-text: var(--wallet-ink);
  --app-canvas-muted: var(--muted-foreground);
  --app-bg-image: var(--wallet-wave-colors), var(--wallet-wave-base);
  --app-texture-opacity: 0;
  --v2-page-surface: linear-gradient(to bottom, transparent 0, var(--wallet-white) 320px);
  --v2-dialog-backdrop: rgb(25 63 50 / 30%);
  --v2-sheet-radius: 30px;
  --tab-bar-height: 76px;
}

:root {
  --people-gradient: radial-gradient(ellipse 100% 60% at 0% 0%, rgb(143 143 224 / 38%), transparent 75%), radial-gradient(ellipse 100% 58% at 100% 12%, rgb(234 175 211 / 35%), transparent 78%), radial-gradient(ellipse 90% 50% at 90% 52%, rgb(251 210 189 / 25%), transparent 80%), linear-gradient(180deg, #edf0fb 0%, #faf5f9 52%, #ffffff 92%);
  --people-content-glass: rgb(255 255 255 / 20%);
}

/* V4: quiet, flat teal and sage homepage reference. */
:root {
  --v4-canvas: #fafbf8;
  --v4-primary: var(--status-available);
  --v4-ink: #152c25;
  --v4-muted: #65766f;
  --v4-card: #eef3ef;
  --v4-quote: #d8e8df;
  --v4-line: #e1e7e2;
  --v4-sos: #e33e52;
  --v4-card-radius: 12px;
}

/* Availability changes accents, keeping the page canvas neutral. */
.availability-theme[data-status="hard"] .app-v4 { --v4-primary: var(--status-hard); }
.availability-theme[data-status="listening"] .app-v4 { --v4-primary: var(--status-listening); }
.availability-theme[data-status="buddies"] .app-v4 { --v4-primary: var(--status-buddies); }
.availability-theme[data-status="off"] .app-v4 { --v4-primary: var(--status-off); }

/* Shared V4 application palette, including inherited dialog controls. */
.app-v4 {
  --primary: var(--v4-primary);
  --foreground: var(--v4-ink);
  --muted-foreground: var(--v4-muted);
  --accent: var(--v4-quote);
  --border: var(--v4-line);
  --ring: var(--v4-primary);
  --wallet-hero-ink: var(--v4-ink);
  --wallet-call-surface: var(--v4-primary);
  --wallet-call-border: var(--v4-primary);
  --wallet-call-shadow: none;
  --sos-background: var(--v4-sos);
  --wallet-payment: var(--v4-card);
  --primary-foreground: var(--v4-ink);
  --v4-action-ink: color-mix(in srgb, var(--v4-ink) 75%, var(--v4-primary));
  --v4-quote: color-mix(in srgb, var(--v4-primary) 22%, var(--v4-canvas));
}

/* V4 values inherited by every shared application screen. */
.app-v4 {
  --background: var(--v4-canvas);
  --card: var(--wallet-white);
  --card-foreground: var(--v4-ink);
  --secondary: var(--v4-quote);
  --secondary-foreground: var(--v4-ink);
  --muted: var(--v4-card);
  --accent-foreground: var(--v4-ink);
  --surface-soft: var(--v4-card);
  --surface-border: var(--v4-line);
  --surface-control: var(--wallet-white);
  --glass-surface: var(--v4-canvas);
  --glass-control: var(--v4-card);
  --glass-text: var(--v4-ink);
  --glass-muted: var(--v4-muted);
  --glass-border: var(--v4-line);
  --glass-shadow: none;
  --wallet-buddy-surface: var(--v4-card);
  --wallet-ink: var(--v4-ink);
  --wallet-shadow: none;
  --wallet-line: var(--v4-line);
  --app-canvas: var(--v4-canvas);
  --app-canvas-text: var(--v4-ink);
  --app-canvas-muted: var(--v4-muted);
}

:root {
  --app-page-width: 600px;
  --app-hero-height: 88px;
  --app-hero-action-size: 44px;
  --app-sos-width: 56px;
  --app-sheet-radius: 24px;
}

:root { --app-hero-illustration-size: 64px; }

:root {
  --welcome-shadow: 0 8px 24px color-mix(in srgb, var(--v4-ink) 8%, transparent);
  --welcome-border: color-mix(in srgb, var(--v4-primary) 30%, var(--v4-line));
  --welcome-enter-duration: 700ms;
  --welcome-enter-distance: 16px;
  --welcome-enter-stagger: 100ms;
}

/* Welcoming start screen: accents from the shared Got-Us palette. */
:root {
  --start-mint: color-mix(in srgb, var(--status-available) 40%, var(--v4-canvas));
  --start-peach: color-mix(in srgb, var(--status-buddies) 35%, var(--v4-canvas));
  --start-blue: color-mix(in srgb, var(--status-off) 30%, var(--v4-canvas));
  --brand-purple-light: #a496bc;
  --brand-purple-mid: #786493;
  --brand-purple-dark: #473e5c;
  --start-background: radial-gradient(ellipse 520px 480px at 0% 0%, color-mix(in srgb, var(--brand-purple-light) 48%, transparent), transparent 100%), radial-gradient(ellipse 420px 560px at 110% 52%, color-mix(in srgb, var(--brand-purple-mid) 24%, transparent), transparent 100%), radial-gradient(ellipse 480px 320px at 35% 112%, color-mix(in srgb, var(--brand-purple-dark) 18%, transparent), transparent 100%), var(--v4-canvas);
  --start-emphasis: #23634e;
  --start-title-size: clamp(32px, 8.5vw, 46px);
  --start-float-duration: 8s;
}

:root { --tab-active-surface: color-mix(in srgb, var(--status-available) 32%, var(--v4-canvas)); --tab-active-ink: var(--v4-ink); }

:root { --brand-full-height: 156px; --brand-welcome-height: 200px; }

:root { --landing-reveal-distance: 18px; --landing-reveal-duration: 700ms; --landing-float-distance: 7px; --landing-float-duration: 7s; }

:root { --builder-left-width: 230px; --builder-right-width: 280px; --builder-mobile-top: 224px; }