/*
 * IP Design System — tokens.css (regenerated, final — synced 2026-09-22)
 * Source of truth: the "IP Design System" artifact (Claude).
 * Full component rules and rationale: IP-Design-System.md (project root).
 *
 * Do not hardcode hex colors, px spacing/padding/margin, or border-radius
 * values anywhere else in the codebase — reference these variables instead.
 * If a value you need doesn't exist here, flag it rather than inventing one.
 *
 * The --ip-* aliases near the end of this file are back-compat names for
 * the pre-rename token set (--ip-color-primary, --ip-space-md, etc.) —
 * still referenced ~90+ times by public/css/flow-forms.css (the
 * login/verify/plans/newListing/claim flow pages' shared .ipflow-*
 * component styles) plus header.blade.php/footer.blade.php/verify.blade.php.
 * Do NOT remove these without first updating every one of those references
 * to the new names directly — dropping them silently breaks that CSS
 * (undefined custom properties resolve to nothing, not the old value).
 * Checked against this pass's rename list: none of the --ip-* aliases
 * below point at a name that got renamed (--secondary-fill* -> now
 * --button-soft-fill* only affected the Button component's own CSS,
 * updated separately), so no alias targets needed to change here.
 */

:root {
  /* ---- Color: Primary & Secondary (parallel brand pair) ---- */
  --primary: var(--brand-blue);
  --primary-dark: var(--brand-blue-dark);
  --secondary: var(--success);
  --secondary-dark: var(--success-strong);

  /* ---- Color: Button fills (component-level, not brand colors) ----
     Renamed from --secondary-fill* in this pass - "Secondary" now means
     the secondary brand color (green) above, so the old Button variant
     name and fill needed a different name to stop colliding in meaning.
     The Button component itself was renamed Secondary -> Soft to match. */
  --button-soft-fill: #eef3f7;
  --button-soft-fill-hover: #dfeaf2;
  --button-soft-fill-active: #cfe0ec;

  /* ---- Color: canonical brand bases ---- */
  --brand-blue: #3270a2;
  --brand-blue-dark: #295b84;
  --success: #5ca614;              /* secondary brand green - deliberate rebrand, was #8ab738 live */
  --warning: #866e43;
  --danger: #9e4a46;
  --info: var(--brand-blue);

  /* ---- Color: button state colors (hover/pressed, not alert colors) ---- */
  --success-strong: #47810f;       /* accessible fill for white content on green */
  --success-strong-dark: #38670c;
  --success-dark: #498410;
  --danger-dark: #813c39;
  --danger-darker: #6b322f;

  /* ---- Color: Alerts - exactly 3 colors each, symmetric ---- */
  --success-text: #294a09;
  --success-bg: #f3f8ee;
  --success-border: #dbebcb;

  --warning-text: var(--warning);
  --warning-bg: #fcf8e5;
  --warning-border: #c8bdaa;        /* darkened from live #f8ebd0 - was too bright */

  --danger-text: var(--danger);
  --danger-bg: #efdfdf;
  --danger-border: var(--danger);

  --info-text: var(--info);
  --info-bg: #eaf0f5;
  --info-border: #d3e2ec;

  /* ---- Color: badge-only colors ---- */
  --recommended-green: #4b7443;
  --recommended-green-dark: #3f6238;
  --sponsored-gold: #825e08;        /* placeholder - no live sample yet */
  --sponsored-gold-bg: #fbf1de;
  --sponsored-card-bg: #fdf8f0;
  --verified-blue: var(--brand-blue);
  --verified-blue-bg: #eaf0f5;

  /* ---- Color: heritage / logo red ---- */
  --brand-red: #d4213d;
  --brand-red-dark: #a91a30;
  --promo-red: #b24334;
  --promo-red-dark: #91362a;

  /* ---- Color: neutrals ---- */
  --ink: #44555b;
  --ink-muted: #757575;
  --ink-subtle: #828282;
  --surface: #ffffff;
  --surface-100: #f2f2f2;
  --border: #dedede;
  --border-strong: #80838a;

  /* ---- Color: links & utility ---- */
  --link-hover: #3c77a6;
  --footer-bg: #333333;             /* confirmed from production CSS */
  --focus-ring: #2e6fe0;
  --tile-divider: #9fbad2;

  /* ---- Type ---- */
  --font-sans: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Type scale (§3, "final") ----
     Sizes/line-heights changed multiple times upstream - this is the
     final table, don't reconcile against an earlier version of it.
     h4 weight is 500 here (was 400 in the previous sync) - matches the
     current CLAUDE.md instruction of 600/600/500/500. */
  --h1-size: 34px;   --h1-line-height: 40px; --h1-weight: 600;
  --h2-size: 28px;   --h2-line-height: 36px; --h2-weight: 600;
  --h3-size: 22px;   --h3-line-height: 28px; --h3-weight: 500;
  --h4-size: 18px;   --h4-line-height: 24px; --h4-weight: 500;
  --listing-title-size: 20px; --listing-title-line-height: 24px; --listing-title-weight: 400;

  --body-lg-size: 20px; --body-lg-line-height: 28px; --body-lg-weight: 400;
  --body-size: 16px;    --body-line-height: 24px;    --body-weight: 400;
  --body-sm-size: 12px; --body-sm-line-height: 16px; --body-sm-weight: 400;
  --caption-size: 12px; --caption-line-height: 16px; --caption-weight: 500;
  --label-size: 12px;   --label-line-height: 16px;   --label-weight: 600;
  --button-lg-size: 16px; --button-lg-line-height: 20px; --button-lg-weight: 600;
  --button-md-size: 14px; --button-md-line-height: 18px; --button-md-weight: 600;
  --button-sm-size: 12px; --button-sm-line-height: 16px; --button-sm-weight: 600;
  --tile-label-size: 16px; --tile-label-line-height: 20px; --tile-label-weight: 500;

  /* ---- Spacing (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ---- Radius (strict 4/8/12/16 rhythm) ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --elevation-1: 0 1px 2px rgba(68, 85, 91, 0.10);
  --elevation-2: 0 4px 8px rgba(68, 85, 91, 0.14);
  --elevation-3: 0 8px 16px rgba(68, 85, 91, 0.18);

  /* ---- Back-compat aliases — see file header. Referenced by
     flow-forms.css and 3 Blade files; do not remove without migrating
     those references first. ---- */
  --ip-color-primary: var(--brand-blue);
  --ip-color-primary-dark: var(--brand-blue-dark);
  --ip-color-dark: var(--ink);
  --ip-color-accent: var(--success-strong);
  --ip-color-warn: var(--danger);
  --ip-color-muted: var(--ink-subtle);
  --ip-color-white: var(--surface);
  --ip-color-bg-light: var(--surface-100);
  --ip-color-border: var(--border);

  --ip-color-success: var(--success-strong);
  --ip-color-success-bg: var(--success-bg);
  --ip-color-error: var(--danger);
  --ip-color-error-bg: var(--danger-bg);
  --ip-color-warning-text: var(--warning);
  --ip-color-warning-bg: var(--warning-bg);
  --ip-color-info: var(--info);
  --ip-color-info-bg: var(--info-bg);

  --ip-font-body: var(--font-sans);
  --ip-font-heading: var(--font-heading);

  --ip-space-xs: var(--space-2);  /* 6px -> 8px */
  --ip-space-sm: var(--space-3);  /* 10px -> 12px */
  --ip-space-md: var(--space-4);  /* 15px -> 16px */
  --ip-space-lg: var(--space-5);  /* 20px -> 24px */
  --ip-space-xl: var(--space-6);  /* 25px -> 32px, kept distinct from lg */

  --ip-radius-sm: var(--radius-sm);
  --ip-radius-tab: 4px 4px 0 0;
  --ip-radius-round: 50%;

  /* Layout - no equivalent in the new doc, left as-is */
  --ip-form-width: 560px;
}