/* ClearProviders brand tokens (final, 2026-10-24). Generated from tokens.json. */
/* Fonts: load fonts.css (self-hosted Manrope + Inter) or Google Fonts before this file. */

:root {
  /* Brand (logo colours are locked) */
  --cp-sky: #4DAEF5;
  --cp-sunshine: #FFC93C;
  --cp-green: #3FAE84;
  --cp-ink: #1C2B3A;
  --cp-emerald: #10835D;

  /* Sky */
  --cp-sky-50: #F1F8FF;
  --cp-sky-100: #DCEEFE;
  --cp-sky-200: #B8DDFC;
  --cp-sky-500: #4DAEF5;
  --cp-sky-700: #1F6FB8;
  --cp-sky-800: #175A96;

  /* Sunshine */
  --cp-sunshine-50: #FFF9E6;
  --cp-sunshine-100: #FFF0C2;
  --cp-sunshine-500: #FFC93C;
  --cp-sunshine-600: #AD7700;
  --cp-sunshine-800: #7A4A00;

  /* Green */
  --cp-green-50: #EAF7F1;
  --cp-green-500: #3FAE84;

  /* Emerald */
  --cp-emerald-50: #E8F6EF;
  --cp-emerald-100: #CDEBDD;
  --cp-emerald-600: #10835D;
  --cp-emerald-700: #0C6F4F;
  --cp-emerald-800: #0A5C42;

  /* Neutral */
  --cp-neutral-0: #FFFFFF;
  --cp-neutral-50: #F5F7FA;
  --cp-neutral-100: #EDF1F5;
  --cp-neutral-200: #E1E6EC;
  --cp-neutral-300: #C9D1DA;
  --cp-neutral-400: #8693A3;
  --cp-neutral-500: #667385;
  --cp-neutral-600: #536172;
  --cp-neutral-700: #3E4C5C;
  --cp-neutral-800: #2A3948;
  --cp-neutral-900: #1C2B3A;

  /* Success */
  --cp-success-text: #0C6F4F;
  --cp-success-bg: #E8F6EF;
  --cp-success-border: #B5DFC9;
  --cp-success-icon: #10835D;

  /* Warning */
  --cp-warning-text: #8A4B08;
  --cp-warning-bg: #FFF4D6;
  --cp-warning-border: #F2D58A;
  --cp-warning-icon: #AD7700;

  /* Error */
  --cp-error-text: #B42318;
  --cp-error-bg: #FDECEA;
  --cp-error-border: #F5C2BD;
  --cp-error-icon: #D92D20;

  /* Info */
  --cp-info-text: #175A96;
  --cp-info-bg: #EAF4FE;
  --cp-info-border: #B8DDFC;
  --cp-info-icon: #1F6FB8;

  /* Semantic roles */
  --cp-text: #1C2B3A;
  --cp-text-secondary: #536172;
  --cp-text-tertiary: #667385;
  --cp-text-on-action: #FFFFFF;
  --cp-text-on-dark: #FFFFFF;
  --cp-link: #0C6F4F;
  --cp-link-hover: #0A5C42;
  --cp-surface: #FFFFFF;
  --cp-surface-tint: #F1F8FF;
  --cp-surface-warm: #FFF9E6;
  --cp-surface-subtle: #F5F7FA;
  --cp-surface-dark: #1C2B3A;
  --cp-border: #E1E6EC;
  --cp-border-strong: #C9D1DA;
  --cp-border-input: #8693A3;
  --cp-focus-ring: #1F6FB8;
  --cp-action: #10835D;
  --cp-action-hover: #0C6F4F;
  --cp-action-pressed: #0A5C42;
  --cp-action-disabled-bg: #E1E6EC;
  --cp-action-disabled-text: #667385;
  --cp-secondary-bg: #FFFFFF;
  --cp-secondary-text: #1C2B3A;
  --cp-secondary-border: #C9D1DA;
  --cp-secondary-hover-bg: #F5F7FA;
  --cp-secondary-pressed-bg: #EDF1F5;
  --cp-chip-allin-bg: #E8F6EF;
  --cp-chip-allin-text: #0C6F4F;
  --cp-chip-allin-border: #CDEBDD;
  --cp-chip-scan-bg: #FFF0C2;
  --cp-chip-scan-text: #7A4A00;
  --cp-chip-scan-border: #F5DC8F;
  --cp-chip-read-bg: #F1F8FF;
  --cp-chip-read-text: #175A96;
  --cp-chip-read-border: #B8DDFC;
  --cp-badge-confirmed-bg: #10835D;
  --cp-badge-confirmed-text: #FFFFFF;

  /* Radii */
  --cp-radius-xs: 4px;
  --cp-radius-sm: 8px;
  --cp-radius-md: 12px;
  --cp-radius-lg: 16px;
  --cp-radius-xl: 24px;
  --cp-radius-pill: 999px;

  /* Shadows */
  --cp-shadow-sm: 0 1px 2px rgba(28, 43, 58, 0.06);
  --cp-shadow-md: 0 1px 2px rgba(28, 43, 58, 0.06), 0 8px 24px -8px rgba(28, 43, 58, 0.14);
  --cp-shadow-lg: 0 2px 4px rgba(28, 43, 58, 0.06), 0 24px 48px -16px rgba(28, 43, 58, 0.22);
  --cp-shadow-glow: 0 12px 32px -12px rgba(77, 174, 245, 0.45);
  --cp-shadow-focus: 0 0 0 2px #FFFFFF, 0 0 0 4px #1F6FB8;

  /* Spacing (4px grid) */
  --cp-space-0: 0px;
  --cp-space-1: 4px;
  --cp-space-2: 8px;
  --cp-space-3: 12px;
  --cp-space-4: 16px;
  --cp-space-5: 20px;
  --cp-space-6: 24px;
  --cp-space-8: 32px;
  --cp-space-10: 40px;
  --cp-space-12: 48px;
  --cp-space-16: 64px;
  --cp-space-20: 80px;
  --cp-space-24: 96px;

  /* Type */
  --cp-font-heading: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cp-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cp-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --cp-text-display-size: 56px; --cp-text-display-line: 60px; --cp-text-display-weight: 800; --cp-text-display-tracking: -0.03em;
  --cp-text-h1-size: 44px; --cp-text-h1-line: 52px; --cp-text-h1-weight: 800; --cp-text-h1-tracking: -0.025em;
  --cp-text-h2-size: 34px; --cp-text-h2-line: 42px; --cp-text-h2-weight: 800; --cp-text-h2-tracking: -0.02em;
  --cp-text-h3-size: 26px; --cp-text-h3-line: 34px; --cp-text-h3-weight: 700; --cp-text-h3-tracking: -0.015em;
  --cp-text-h4-size: 20px; --cp-text-h4-line: 28px; --cp-text-h4-weight: 700; --cp-text-h4-tracking: -0.01em;
  --cp-text-body-lg-size: 18px; --cp-text-body-lg-line: 28px; --cp-text-body-lg-weight: 400; --cp-text-body-lg-tracking: 0;
  --cp-text-body-size: 16px; --cp-text-body-line: 24px; --cp-text-body-weight: 400; --cp-text-body-tracking: 0;
  --cp-text-small-size: 14px; --cp-text-small-line: 20px; --cp-text-small-weight: 400; --cp-text-small-tracking: 0;
  --cp-text-caption-size: 12px; --cp-text-caption-line: 16px; --cp-text-caption-weight: 600; --cp-text-caption-tracking: 0.06em;
  --cp-text-price-lg-size: 40px; --cp-text-price-lg-line: 44px; --cp-text-price-lg-weight: 800; --cp-text-price-lg-tracking: -0.02em;

  /* Motion */
  --cp-motion-fast: 120ms;
  --cp-motion-base: 200ms;
  --cp-motion-ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (max-width: 640px) {
  :root {
    --cp-text-display-size: 40px; --cp-text-display-line: 44px;
    --cp-text-h1-size: 34px; --cp-text-h1-line: 40px;
    --cp-text-h2-size: 28px; --cp-text-h2-line: 34px;
    --cp-text-h3-size: 22px; --cp-text-h3-line: 28px;
  }
}

/* ---- Base + components (optional) ---- */
.cp-body { font-family: var(--cp-font-body); font-size: var(--cp-text-body-size); line-height: var(--cp-text-body-line); color: var(--cp-text); background: var(--cp-surface); -webkit-font-smoothing: antialiased; }
.cp-display, .cp-h1, .cp-h2, .cp-h3, .cp-h4 { font-family: var(--cp-font-heading); color: var(--cp-text); margin: 0; }
.cp-display { font-size: var(--cp-text-display-size); line-height: var(--cp-text-display-line); font-weight: 800; letter-spacing: var(--cp-text-display-tracking); }
.cp-h1 { font-size: var(--cp-text-h1-size); line-height: var(--cp-text-h1-line); font-weight: 800; letter-spacing: var(--cp-text-h1-tracking); }
.cp-h2 { font-size: var(--cp-text-h2-size); line-height: var(--cp-text-h2-line); font-weight: 800; letter-spacing: var(--cp-text-h2-tracking); }
.cp-h3 { font-size: var(--cp-text-h3-size); line-height: var(--cp-text-h3-line); font-weight: 700; letter-spacing: var(--cp-text-h3-tracking); }
.cp-h4 { font-size: var(--cp-text-h4-size); line-height: var(--cp-text-h4-line); font-weight: 700; letter-spacing: var(--cp-text-h4-tracking); }
.cp-price { font-family: var(--cp-font-heading); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.cp-link { color: var(--cp-link); text-decoration: underline; text-underline-offset: 2px; }
.cp-link:hover { color: var(--cp-link-hover); }

.cp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px;
  font: 700 16px/1 var(--cp-font-body); border-radius: var(--cp-radius-md); border: 1px solid transparent; cursor: pointer;
  transition: background var(--cp-motion-fast) var(--cp-motion-ease), box-shadow var(--cp-motion-fast) var(--cp-motion-ease); }
.cp-btn:focus-visible { outline: none; box-shadow: var(--cp-shadow-focus); }
.cp-btn--primary { background: var(--cp-action); color: var(--cp-text-on-action); }
.cp-btn--primary:hover { background: var(--cp-action-hover); }
.cp-btn--primary:active { background: var(--cp-action-pressed); }
.cp-btn--secondary { background: var(--cp-secondary-bg); color: var(--cp-secondary-text); border-color: var(--cp-secondary-border); }
.cp-btn--secondary:hover { background: var(--cp-secondary-hover-bg); }
.cp-btn--secondary:active { background: var(--cp-secondary-pressed-bg); }
.cp-btn:disabled { background: var(--cp-action-disabled-bg); color: var(--cp-action-disabled-text); border-color: transparent; cursor: not-allowed; }

.cp-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: var(--cp-radius-pill);
  font: 700 12px/1 var(--cp-font-body); border: 1px solid transparent; white-space: nowrap; }
.cp-chip--allin { background: var(--cp-chip-allin-bg); color: var(--cp-chip-allin-text); border-color: var(--cp-chip-allin-border); }
.cp-chip--scan { background: var(--cp-chip-scan-bg); color: var(--cp-chip-scan-text); border-color: var(--cp-chip-scan-border); }
.cp-chip--read { background: var(--cp-chip-read-bg); color: var(--cp-chip-read-text); border-color: var(--cp-chip-read-border); }
.cp-chip--confirmed { background: var(--cp-badge-confirmed-bg); color: var(--cp-badge-confirmed-text); }

.cp-card { background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); box-shadow: var(--cp-shadow-md); }
.cp-input { height: 48px; padding: 0 14px; border: 1px solid var(--cp-border-input); border-radius: var(--cp-radius-md);
  font: 400 16px/1.2 var(--cp-font-body); color: var(--cp-text); background: var(--cp-surface); }
.cp-input::placeholder { color: var(--cp-text-tertiary); }
.cp-input:focus-visible { outline: none; border-color: var(--cp-focus-ring); box-shadow: 0 0 0 3px rgba(31, 111, 184, 0.25); }