/* TopTravelESIM — eSIM aggregator color system, version 1.0 */
:root {
  color-scheme: light;
  --color-ink: #102B3F;
  --color-text: #334E61;
  --color-text-muted: #52677A;
  --color-page: #F6F9FC;
  --color-surface: #FFFFFF;
  --color-border: #DDE7EE;
  --color-primary: #007C74;
  --color-primary-hover: #006A63;
  --color-primary-soft: #DDF8F2;
  --color-accent-mint: #2ED2BA;
  --color-accent-sky: #EAF4FC;
  --color-accent-sun: #F9DE85;
  --color-link: #17649D;
  --color-success: #11664E;
  --color-success-bg: #E4F7EE;
  --color-warning: #8F590B;
  --color-warning-bg: #FFF3D6;
  --color-danger: #BD3446;
  --color-danger-bg: #FCEBEF;
  --color-focus: #26ADCA;
  --radius-card: 18px;
  --radius-control: 12px;
  --radius-pill: 9999px;
  --shadow-card: 0 8px 32px rgba(16,43,63,.055);
}
/* Usage rules: never set mint/sunlight yellow as text on white. Use ink on light badges. */
html { background:var(--color-page); color:var(--color-text); }
body { background:var(--color-page); color:var(--color-text); font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
h1,h2,h3,h4 { color:var(--color-ink); }
a { color:var(--color-link); }
a:hover { color:var(--color-primary-hover); }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid var(--color-focus); outline-offset:3px;
}
.button-primary { background:var(--color-primary); color:#fff; border:0; border-radius:var(--radius-control); }
.button-primary:hover { background:var(--color-primary-hover); }
.button-primary:disabled { background:#7E9C9B; color:#fff; cursor:not-allowed; }
.button-secondary { background:#fff; color:var(--color-ink); border:1px solid var(--color-border); border-radius:var(--radius-control); }
.button-secondary:hover { background:var(--color-accent-sky); }
.card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-card); box-shadow:var(--shadow-card); }
.badge-best-value { background:var(--color-accent-sun); color:var(--color-ink); }
.badge-selected { background:var(--color-primary-soft); color:var(--color-primary-hover); }
.badge-success { background:var(--color-success-bg); color:var(--color-success); }
.badge-warning { background:var(--color-warning-bg); color:var(--color-warning); }
.badge-error { background:var(--color-danger-bg); color:var(--color-danger); }
.input-control { background:#fff; color:var(--color-ink); border:1px solid #B6CAD3; border-radius:var(--radius-control); }
.input-control:focus { border-color:var(--color-primary); }
.hero-soft { background:linear-gradient(120deg,#F3FBF8 0%,#EAF4FC 100%); }
/* Maintain matching colors on desktop and mobile; vary only layout. */