/*
 * TaranQ Design System — CSS Tokens v1
 * Source: Design System artifact (28 Sept 2026)
 * Generated: 1 Oct 2026
 *
 * RULES
 * - Use these tokens only; never hard-code colours, sizes, spacing or radii.
 * - The marketing website yellow is #FFD23F (locked 27 Sept), NOT the app's
 *   yellow-400 (#FDBD00). Both are defined below.
 * - Archetype aqua and rose are used for Archetypes only.
 * - Match Score labels: Strong = green, Good = violet, Fair = grey. Never red.
 * - Status families: progress = violet, waiting = yellow, done = green,
 *   negative = red, inactive = grey.
 */

/* ================================================================
   1. COLOURS — Raw palette
   ================================================================ */
:root {
  /* White */
  --white: #ffffff;

  /* Violet */
  --violet-25: #fbf8ff;
  --violet-50: #f9f5ff;
  --violet-100: #f0e6ff;
  --violet-200: #d4c4e9;
  --violet-300: #be9fda;
  --violet-400: #a771ca;
  --violet-500: #8e41b4;
  --violet-600: #6f35a2;
  --violet-700: #522c87;
  --violet-800: #3b1f67;
  --violet-900: #261547;

  /* Yellow (app) */
  --yellow-50: #fffaeb;
  --yellow-100: #fff3d3;
  --yellow-200: #fee6ab;
  --yellow-300: #fdd57c;
  --yellow-400: #fdbd00;
  --yellow-500: #eaa615;
  --yellow-600: #cb8315;
  --yellow-700: #a2641c;
  --yellow-800: #7c4a1c;
  --yellow-900: #5b3516;

  /* Neutral */
  --neutral-50: #faf9fc;
  --neutral-100: #f4f3f6;
  --neutral-200: #e7e5ea;
  --neutral-300: #d1d0d5;
  --neutral-400: #a8a7ac;
  --neutral-500: #848287;
  --neutral-600: #66656a;
  --neutral-700: #535255;
  --neutral-800: #414042;
  --neutral-900: #272629;

  /* Green */
  --green-50: #edfbf0;
  --green-100: #d3f5db;
  --green-200: #abe9bb;
  --green-300: #7fd497;
  --green-400: #4fb772;
  --green-500: #2a9754;
  --green-600: #137d41;
  --green-700: #126635;
  --green-800: #104f29;
  --green-900: #0a371b;

  /* Red */
  --red-50: #fff4f3;
  --red-100: #ffe4e1;
  --red-200: #ffc8c3;
  --red-300: #fda19a;
  --red-400: #f2716a;
  --red-500: #db4241;
  --red-600: #c2272d;
  --red-700: #a21921;
  --red-800: #80161a;
  --red-900: #5c0e10;

  /* ================================================================
     2. COLOURS — Archetypes (aqua + rose used here only)
     ================================================================ */
  --archetype-rookie-bg: #ebfafb;
  --archetype-rookie-badge: #b6e9ec;
  --archetype-rookie-accent: #02999f;
  --archetype-rookie-text: #003e41;

  --archetype-contender-bg: #fff3f7;
  --archetype-contender-badge: #ffcfe0;
  --archetype-contender-accent: #d7498c;
  --archetype-contender-text: #5b1938;

  --archetype-pro-bg: #f8f5ff;
  --archetype-pro-badge: #e3d6ff;
  --archetype-pro-accent: #522c87;
  --archetype-pro-text: #261547;

  --archetype-allstar-bg: #fffaeb;
  --archetype-allstar-badge: #fee6ab;
  --archetype-allstar-accent: #fdbd00;
  --archetype-allstar-text: #5b3516;

  /* ================================================================
     3. COLOURS — Semantic (app)
     ================================================================ */
  --canvas: var(--violet-25); /* #FBF8FF — app background */
  --surface: var(--white); /* card background */
  --line: #efe7fb; /* card borders, dividers */
  --text-primary: var(--neutral-800); /* #414042 */
  --text-secondary: var(--neutral-600); /* #66656A */
  --text-placeholder: var(--neutral-500); /* #848287 */

  --primary: var(--violet-700); /* #522C87 */
  --primary-hover: var(--violet-800); /* #3B1F67 */
  --on-primary: var(--white);
  --highlight: var(--violet-200); /* #D4C4E9 */
  --on-highlight: var(--violet-800);

  --sidebar: var(--neutral-200); /* #E7E5EA */
  --sidebar-item: #ffffffbf; /* white 75% */
  --sidebar-active: var(--violet-700);

  --warm: var(--yellow-400); /* #FDBD00 — small accents only */
  --warm-soft: var(--yellow-100);

  --focus: var(--violet-500); /* focus ring */
  --badge: var(--violet-700); /* unread-count badges */
  --business-panel: var(--violet-700); /* business profile hero */

  /* ================================================================
     4. COLOURS — Statuses (one family = one meaning, everywhere)
     ================================================================ */
  --status-progress-bg: var(--violet-200);
  --status-progress-text: var(--violet-800);

  --status-waiting-bg: var(--yellow-200);
  --status-waiting-text: var(--yellow-900);

  --status-done-bg: var(--green-100);
  --status-done-text: var(--green-800);

  --status-negative-bg: var(--red-100);
  --status-negative-text: var(--red-800);

  --status-inactive-bg: var(--neutral-200);
  --status-inactive-text: var(--neutral-800);

  /* ================================================================
     5. COLOURS — Match Score (never red)
     ================================================================ */
  --match-strong: var(--green-600); /* 80%+ */
  --match-good: var(--violet-700); /* 60–79% */
  --match-fair: var(--neutral-200); /* 40–59% */

  /* ================================================================
     6. COLOURS — Marketing website (always light, ignores dark mode)
     ================================================================ */
  --marketing-yellow: #ffd23f; /* LOCKED 27 Sept — not yellow-400 */
  --marketing-soft: #fffaeb; /* soft sections */
  --marketing-text: #1f1a2b;
  --marketing-accent: var(--violet-600); /* violet as highlight only */

  /* ================================================================
     7. TYPOGRAPHY
     ================================================================ */
  --font-sans: "Figtree", "Avenir Next", Avenir, system-ui, sans-serif;

  /* Display — marketing hero headings */
  --display-size: 40px;
  --display-line: 44px;
  --display-weight: 800;
  --display-tracking: -0.02em;
  --display-phone-size: 32px;
  --display-phone-line: 36px;

  /* H1 — page titles (one per screen) */
  --h1-size: 28px;
  --h1-line: 34px;
  --h1-weight: 800;

  /* H2 — section headings */
  --h2-size: 22px;
  --h2-line: 28px;
  --h2-weight: 800;

  /* H3 — card titles */
  --h3-size: 18px;
  --h3-line: 24px;
  --h3-weight: 700;

  /* Body — text and form inputs (16px stops iPhones zooming into fields) */
  --body-size: 16px;
  --body-line: 24px;
  --body-weight: 400;
  --body-strong-weight: 700;

  /* Small — helper text, metadata, secondary lines */
  --small-size: 14px;
  --small-line: 20px;
  --small-weight: 400;

  /* Label — buttons, navigation items, tabs */
  --label-size: 14px;
  --label-line: 18px;
  --label-weight: 700;

  /* Caption — chips, badges, bottom tab labels (smallest allowed) */
  --caption-size: 12px;
  --caption-line: 16px;
  --caption-weight: 700;

  /* Stat — numbers in tiles and Match Score blocks */
  --stat-size: 28px;
  --stat-line: 32px;
  --stat-weight: 800;

  /* ================================================================
     8. SPACING
     ================================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* ================================================================
     9. RADIUS
     ================================================================ */
  --radius-sm: 10px; /* buttons */
  --radius-md: 14px; /* cards */
  --radius-lg: 20px; /* large blocks */
  --radius-pill: 999px; /* pills, badges */

  /* Marketing website overrides (from prototypes) */
  --radius-btn-marketing: 10px;
  --radius-card-marketing: 12px; /* 12–16px per SRS */
  --radius-block-marketing: 20px;

  /* ================================================================
     10. SHADOWS
     ================================================================ */
  --shadow-card: 0 4px 14px rgba(82, 44, 135, 0.07);
  --shadow-float: 0 12px 32px rgba(82, 44, 135, 0.16);

  /* ================================================================
     11. SIZES AND BREAKPOINTS
     ================================================================ */
  --touch-target: 44px; /* minimum for any tappable element */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --avatar-sm: 40px;
  --avatar-md: 72px;
  --avatar-lg: 160px;

  --tabbar-height: 64px; /* phone bottom tab bar */
  --sidebar-width: 264px; /* default */
  --sidebar-width-wide: 296px; /* from 1600px viewport */
  --content-max: 1200px; /* content column max-width incl. padding */

  --phone-max: 760px; /* phone layout breakpoint */
  --wide-min: 1600px; /* wide sidebar breakpoint */

  /* ================================================================
     12. ICONS
     ================================================================ */
  /* Phosphor Icons (MIT)
   * Duotone at 20px+
   * Bold for 16px inline
   * Fill for the active tab
   */
}

/* ================================================================
   13. RESPONSIVE: phone layout
   ================================================================ */
@media (max-width: 760px) {
  :root {
    --display-size: var(--display-phone-size);
    --display-line: var(--display-phone-line);
  }
}

/* ================================================================
   14. MARKETING PAGES: always light (ignore dark mode)
   ================================================================ */
/* Marketing pages use --marketing-* tokens and do not respond to
   prefers-color-scheme. Apply these on the marketing page root. */

/* ================================================================
   15. TEST WIDTHS
   ================================================================ */
/* Every page must be checked at:
   360, 390, 760, 1024, 1440, 1920px
   No horizontal scrolling at any of them. */

/* ================================================================
   W1 MARKETING FOUNDATION
   Component geometry comes directly from the approved W1 prototype.
   ================================================================ */
@font-face {
  font-family: "Figtree";
  src: url("/public/marketing/fonts/Figtree-Variable.woff2")
    format("woff2-variations");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --marketing-secondary: #5f5a6b;
  --marketing-border: #ede6d6;
  --marketing-green: #12a150;
  --marketing-cream-line: #eadfbf;
  --marketing-shadow-card: 0 18px 40px rgba(91, 53, 22, 0.22);
  --marketing-shadow-panel: 0 20px 40px rgba(91, 53, 22, 0.12);
  --marketing-shadow-violet: 0 24px 50px rgba(38, 21, 71, 0.3);
  --marketing-wrap-padding: var(--space-6);
  --marketing-section-space: 110px;
  --marketing-section-space-phone: 72px;
  --marketing-nav-height: 76px;
  --marketing-footer-space-top: 56px;
  --marketing-footer-space-bottom: 40px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  overflow-x: clip;
  scroll-behavior: smooth;
  color-scheme: light;
}
body.marketing-page {
  margin: 0;
  min-width: 320px;
  background: var(--white);
  color: var(--marketing-text);
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
.marketing-page img {
  display: block;
  max-width: 100%;
}
.marketing-page a {
  color: inherit;
}
.marketing-page :focus-visible {
  outline: 3px solid var(--violet-500);
  outline-offset: var(--space-1);
  border-radius: var(--radius-sm);
}
.marketing-wrap {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--marketing-wrap-padding);
}
.marketing-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding-inline: var(--space-6);
  border: 0;
  border-radius: var(--radius-btn-marketing);
  font: 800 16px/normal var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 200ms ease,
    background-color 200ms ease;
}
.marketing-button:hover {
  transform: translateY(-2px);
}
.marketing-page .marketing-button--violet {
  background: var(--primary);
  color: var(--on-primary);
}
.marketing-page .marketing-button--violet:hover {
  background: var(--violet-800);
  color: var(--on-primary);
}
.marketing-button--yellow {
  background: var(--marketing-yellow);
  color: var(--violet-900);
}
.marketing-button--outline {
  background: var(--white);
  color: var(--marketing-text);
  box-shadow: inset 0 0 0 2px var(--marketing-text);
}

.marketing-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--marketing-yellow);
}
.marketing-nav__inner {
  min-height: var(--marketing-nav-height);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.marketing-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.marketing-logo img {
  width: 116px;
  height: auto;
}
.marketing-nav__links {
  display: flex;
  gap: var(--space-1);
  margin-left: auto;
}
.marketing-nav__links a,
.marketing-menu nav a {
  min-height: var(--touch-target);
  display: flex;
  align-items: center;
  padding-inline: var(--space-3);
  border-radius: var(--space-2);
  font-weight: 700;
  font-size: 15px;
  line-height: normal;
  text-decoration: none;
}
.marketing-nav__links a:hover {
  background: rgba(255, 255, 255, 0.6);
}
.marketing-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.marketing-nav .marketing-button {
  min-height: var(--touch-target);
  padding-inline: var(--space-5);
  font-size: 15px;
  line-height: normal;
  font-weight: 800;
}
.marketing-menu {
  display: none;
  position: relative;
}
.marketing-menu summary {
  width: var(--touch-target);
  height: var(--touch-target);
  display: grid;
  place-items: center;
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: inset 0 0 0 2px var(--marketing-text);
}
.marketing-menu summary::-webkit-details-marker {
  display: none;
}
.marketing-menu summary span,
.marketing-menu summary span::before,
.marketing-menu summary span::after {
  width: var(--icon-md);
  height: 2px;
  display: block;
  position: relative;
  border-radius: var(--radius-pill);
  background: var(--marketing-text);
}
.marketing-menu summary span::before,
.marketing-menu summary span::after {
  content: "";
  position: absolute;
  left: 0;
}
.marketing-menu summary span::before {
  top: -6px;
}
.marketing-menu summary span::after {
  top: 6px;
}
.marketing-menu nav {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  min-width: 210px;
  padding: var(--space-2);
  border: 1px solid var(--marketing-border);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-float);
}

.marketing-footer {
  padding-block: var(--marketing-footer-space-top)
    var(--marketing-footer-space-bottom);
  border-top: 1px solid var(--marketing-border);
  background: var(--marketing-soft);
  color: var(--marketing-secondary);
}
.marketing-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--space-8);
}
.marketing-footer__brand img {
  width: 116px;
  height: auto;
  margin-bottom: var(--space-3);
}
.marketing-footer__brand p {
  max-width: 22em;
  margin: 0;
}
.marketing-footer b {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--marketing-text);
}
.marketing-footer a {
  min-height: 32px;
  display: flex;
  align-items: center;
  font-size: 15px;
  text-decoration: none;
}
.marketing-footer a:hover {
  color: var(--violet-700);
}

@media (max-width: 860px) {
  .marketing-nav__links,
  .marketing-nav__signin {
    display: none;
  }
  .marketing-nav__actions {
    margin-left: auto;
  }
  .marketing-menu {
    display: block;
  }
}
@media (max-width: 760px) {
  :root {
    --marketing-wrap-padding: var(--space-4);
    --marketing-nav-height: 64px;
  }
  .marketing-logo img {
    width: 92px;
  }
  .marketing-nav .marketing-button {
    padding-inline: var(--space-3);
  }
  .marketing-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8) var(--space-5);
  }
  .marketing-footer__brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 380px) {
  .marketing-nav .marketing-button {
    padding-inline: var(--space-2);
  }
  .marketing-logo img {
    width: 82px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}