/*
 * Design tokens - IP Design System (IP-Design-System.md).
 *
 * This supersedes the first-pass token set this file used to hold (the
 * "IP-Design-Principles.md §1" tokens extracted straight from live
 * web.css values, e.g. --ip-color-primary: #1470a6). Per explicit owner
 * direction, the newer IP Design System doc's own sampled values are now
 * the source of truth, including where they differ from what was already
 * live (most visibly: brand blue #1470a6 -> #3270a2).
 *
 * The old --ip-* names are kept below as aliases onto the new tokens,
 * rather than deleted, because they're referenced ~90 times already
 * (public/css/flow-forms.css - the login/verify/plans/newListing/claim
 * flow pages' shared .ipflow-* component styles - plus two Blade files).
 * That means this one file change is what actually applies the new
 * palette everywhere it's currently used, with nothing else to touch
 * yet; a later pass can migrate flow-forms.css to reference the new
 * names directly and retire these aliases.
 *
 * Two aliases needed a judgment call, not a plain rename, because of the
 * doc's own contrast rule (§ "Important, don't skip"): raw --success
 * fails WCAG contrast for white text/icons on it.
 *   - --ip-color-success is used by .ipflow-done-circle with color:#fff
 *     directly on it - aliased to --success-strong, not --success.
 *   - --ip-color-accent is used by the steps-sidebar's completed-step
 *     marker, same white-icon-on-green pattern - also aliased to
 *     --success-strong, not the plain green accent it used to be.
 *   - --ip-color-bg-light is a plain neutral wash (.ipflow-aside-box /
 *     .ipflow-steps-sidebar background), so it maps to the new doc's
 *     neutral --surface-100, not the blue-tinted --secondary-fill.
 *   - The old spacing scale (6/10/15/20/25px) isn't on the new doc's
 *     strict 4px rhythm, so each step maps to its closest new value
 *     (25px kept distinct from 20px by rounding up to 32px, not down to
 *     the same 24px as 20px, so the two don't collapse together).
 * --ip-form-width has no equivalent in the new doc (a layout width, not
 * a color/type/spacing/radius token) and is left unchanged.
 */
:root {
  /* Color - brand */
  --brand-blue: #3270a2;
  --brand-blue-dark: #295b84;
  --secondary-fill: #eef3f7;
  --secondary-fill-hover: #dfeaf2;
  --secondary-fill-active: #cfe0ec;
  --brand-red: #d4213d;
  --brand-red-dark: #a91a30;
  --promo-red: #b24334;
  --promo-red-dark: #91362a;

  /* Color - success/green */
  --success: #8ab738;           /* decorative only - see note below */
  --success-strong: #608027;    /* use for any white text/icon on green */
  --success-strong-dark: #4e681f;
  --success-dark: #6e922c;
  --success-bg: #f3f7eb;
  --success-border: #deeac7;
  --success-text: #455b1c;
  --recommended-green: #4b7443;
  --recommended-green-dark: #3f6238;

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

  /* Color - danger/error */
  --danger: #9e4a46;
  --danger-bg: #efdfdf;
  --danger-dark: #813c39;
  --danger-darker: #6b322f;
  --danger-border: var(--danger);

  /* Color - warning */
  --warning: #866e43;
  --warning-bg: #fcf8e5;
  --warning-border: #f8ebd0;

  /* Color - info */
  --info: var(--brand-blue);
  --info-bg: #eaf0f5;
  --info-border: #d3e2ec;

  /* Color - links */
  --link-hover: #3c77a6;

  /* Color - footer (PLACEHOLDER, no live sample yet) */
  --footer-bg: #44555b;

  /* Color - badges */
  --sponsored-gold: #825e08;         /* PLACEHOLDER */
  --sponsored-gold-bg: #fbf1de;      /* PLACEHOLDER */
  --sponsored-card-bg: #fdf8f0;
  --verified-blue: var(--brand-blue);
  --verified-blue-bg: #eaf0f5;

  /* Utility */
  --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;

  /* 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 onto the tokens above - see file header --- */
  --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;
}