/* ──────────────────────────────────────────────────────────────────────────
   Abelssoft — Color tokens
   Base palette (raw values) + semantic aliases. Light theme on :root,
   dark theme under [data-theme="dark"].
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* ---- Brand ---- */
  --abel-red: #CC1F1F;          /* primary brand red — CTAs, accents */
  --abel-red-hover: #B51B1B;    /* hover/press darkening */
  --abel-red-tint: #FCEDEC;     /* soft red wash — banners, badges */
  --abel-red-tint-border: #F3C9C6;

  --abel-blue: #036FA3;         /* secondary brand blue (links, focus ring) */
  --abel-blue-deep: #005E86;    /* darker blue — link rest state */
  --abel-blue-tint: #EDF4F8;    /* soft blue wash — chips, account pill */
  --abel-blue-tint-2: #F4F8FB;

  /* ---- Neutrals (warm-grey scale) ---- */
  --ink-900: #1A1A1A;           /* primary foreground */
  --ink-700: #1F2A33;           /* strong slate heading */
  --ink-600: #3F4A52;           /* body slate */
  --ink-500: #5A6470;           /* secondary text / icons */
  --ink-400: #6B6B6B;           /* muted foreground */
  --ink-300: #9AA3AB;           /* faint text, placeholders */
  --line: #E8E6E2;              /* default hairline border */
  --line-cool: #E8ECF1;         /* cool hairline (headers, cards) */
  --surface: #FFFFFF;           /* card / panel surface */
  --canvas: #F6F7F9;            /* page background */
  --canvas-2: #F9FBFF;          /* lighter page background */
  --input-bg: #F6F7F9;          /* input fill */

  /* ---- Semantic — status ---- */
  --success: #1FA86A;           /* check marks, secure */
  --success-600: #16834f;
  --success-tint: #E7F6EE;
  --star: #FFB400;              /* review stars (amber) */
  --trustpilot: #00B67A;        /* Trustpilot green */

  /* ---- Semantic aliases ---- */
  --color-primary: var(--abel-red);
  --color-primary-hover: var(--abel-red-hover);
  --color-secondary: var(--abel-blue);
  --text-strong: var(--ink-700);
  --text-body: var(--ink-600);
  --text-heading: var(--ink-900);
  --text-muted: var(--ink-400);
  --text-link: var(--abel-blue-deep);
  --text-link-hover: var(--abel-blue);
  --surface-card: var(--surface);
  --surface-page: var(--canvas-2);
  --border-default: var(--line);
  --border-card: var(--line-cool);
  --focus-ring: var(--abel-blue);
}

/* ──────────────── Dark theme ──────────────── */
[data-theme="dark"] {
  --ink-900: #E7EAEF;
  --ink-700: #E7EAEF;
  --ink-600: #AEB8C2;
  --ink-500: #9AA4B0;
  --ink-400: #9AA4B0;
  --ink-300: #8A93A0;
  --line: #1C222A;
  --line-cool: #1C222A;
  --surface: #161B22;
  --canvas: #0E1116;
  --canvas-2: #0E1116;
  --input-bg: #10151B;

  --abel-red: #FF7A7A;          /* lifted red for dark surfaces */
  --abel-red-hover: #FF9494;
  --abel-red-tint: rgba(255,122,122,.13);
  --abel-blue: #7FC4E6;
  --abel-blue-deep: #5FB0D8;
  --abel-blue-tint: rgba(95,176,216,.14);
  --success: #5FD39A;
  --success-tint: rgba(95,211,154,.14);

  --color-primary: #CC1F1F;     /* CTAs stay true red even on dark */
  --color-primary-hover: #B51B1B;
}

/* "Premium dark" chrome surface (header/footer on dark layouts) */
:root { --surface-premium-dark: #0B0D12; }