/*
 * HIH Digital Design System 1.0.1
 * Shared visual language for marketing sites, product apps and dashboards.
 */

:root {
  --hih-navy-950: #151a3a;
  --hih-navy-900: #20275b;
  --hih-navy-800: #29346f;
  --hih-ink: #171a2b;
  --hih-muted: #5d6475;
  --hih-cream: #fffdf7;
  --hih-paper: #ffffff;
  --hih-mint: #dff8f2;
  --hih-teal: #0f7f85;
  --hih-teal-dark: #0a5f64;
  --hih-yellow: #ffd21c;
  --hih-yellow-dark: #dcae00;
  --hih-coral: #ff5e70;
  --hih-pink: #f7ddec;
  --hih-lavender: #e9e4ff;
  --hih-sky: #dff2ff;
  --hih-success: #168a6b;
  --hih-warning: #a66400;
  --hih-danger: #c43d51;
  --hih-border: #dfe3ee;
  --hih-border-strong: #c8cedd;
  --hih-shadow-sm: 0 2px 8px rgba(26, 33, 72, 0.08);
  --hih-shadow-md: 0 14px 38px rgba(26, 33, 72, 0.12);
  --hih-shadow-lg: 0 26px 70px rgba(26, 33, 72, 0.16);
  --hih-radius-sm: 10px;
  --hih-radius-md: 16px;
  --hih-radius-lg: 24px;
  --hih-radius-pill: 999px;
  --hih-focus: 0 0 0 3px rgba(17, 157, 164, 0.32);
  --hih-content: 1180px;

  /* shadcn/Tailwind-compatible color channels */
  --background: 44 100% 98%;
  --foreground: 233 29% 13%;
  --card: 0 0% 100%;
  --card-foreground: 233 29% 13%;
  --popover: 0 0% 100%;
  --popover-foreground: 233 29% 13%;
  --primary: 235 48% 24%;
  --primary-foreground: 0 0% 100%;
  --secondary: 165 58% 92%;
  --secondary-foreground: 183 77% 27%;
  --muted: 224 30% 95%;
  --muted-foreground: 225 11% 41%;
  --accent: 49 100% 55%;
  --accent-foreground: 235 48% 18%;
  --destructive: 352 54% 50%;
  --destructive-foreground: 0 0% 100%;
  --border: 224 24% 90%;
  --input: 224 24% 86%;
  --ring: 183 81% 35%;
  --radius: 0.875rem;
}

html[data-hih-design] {
  color-scheme: light;
  scroll-behavior: smooth;
  accent-color: var(--hih-teal);
}

html[data-hih-design],
html[data-hih-design] body,
html[data-hih-design] button,
html[data-hih-design] input,
html[data-hih-design] select,
html[data-hih-design] textarea {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-hih-design] body {
  color: var(--hih-ink);
  background-color: var(--hih-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[data-hih-design] *,
html[data-hih-design] *::before,
html[data-hih-design] *::after {
  box-sizing: border-box;
}

html[data-hih-design] ::selection {
  color: var(--hih-navy-950);
  background: var(--hih-yellow);
}

html[data-hih-design] :focus-visible {
  outline: 3px solid var(--hih-teal) !important;
  outline-offset: 3px !important;
}

html[data-hih-design] h1,
html[data-hih-design] h2,
html[data-hih-design] h3,
html[data-hih-design] h4 {
  color: var(--hih-ink);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

html[data-hih-design] h1 {
  line-height: 1.15;
  overflow-wrap: break-word;
}

html[data-hih-design] h2 {
  line-height: 1.12;
}

html[data-hih-design] p,
html[data-hih-design] li {
  line-height: 1.65;
}

html[data-hih-design] a {
  text-underline-offset: 0.2em;
}

html[data-hih-design] input,
html[data-hih-design] select,
html[data-hih-design] textarea {
  color: var(--hih-ink);
  background: var(--hih-paper);
  border-color: var(--hih-border-strong);
  border-radius: var(--hih-radius-sm);
}

html[data-hih-design] input:hover,
html[data-hih-design] select:hover,
html[data-hih-design] textarea:hover {
  border-color: var(--hih-teal);
}

html[data-hih-design] table {
  border-collapse: separate;
  border-spacing: 0;
}

html[data-hih-design] thead {
  color: var(--hih-navy-900);
  background: var(--hih-mint);
}

html[data-hih-design] tbody tr {
  transition: background-color 160ms ease;
}

html[data-hih-design] tbody tr:hover {
  background: rgba(223, 248, 242, 0.55);
}

/* Common utility-framework mappings */
html[data-hih-design] .bg-background {
  background-color: var(--hih-cream) !important;
}

html[data-hih-design] .bg-card,
html[data-hih-design] .bg-popover {
  background-color: var(--hih-paper) !important;
}

html[data-hih-design] .text-foreground,
html[data-hih-design] .text-card-foreground,
html[data-hih-design] .text-popover-foreground {
  color: var(--hih-ink) !important;
}

html[data-hih-design] .text-muted-foreground {
  color: var(--hih-muted) !important;
}

html[data-hih-design] .bg-primary {
  background-color: var(--hih-navy-900) !important;
}

html[data-hih-design] .text-primary {
  color: var(--hih-navy-900) !important;
}

html[data-hih-design] .text-primary-foreground {
  color: #fff !important;
}

html[data-hih-design] .bg-secondary,
html[data-hih-design] .bg-muted {
  background-color: var(--hih-mint) !important;
}

html[data-hih-design] .border-border,
html[data-hih-design] .border-input {
  border-color: var(--hih-border) !important;
}

html[data-hih-design] .ring-ring {
  --tw-ring-color: var(--hih-teal) !important;
}

/* Shared authored components */
.hih-shell {
  width: min(calc(100% - 32px), var(--hih-content));
  margin-inline: auto;
}

.hih-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.72rem;
  color: var(--hih-teal-dark);
  background: var(--hih-mint);
  border: 1px solid rgba(17, 157, 164, 0.2);
  border-radius: var(--hih-radius-pill);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.hih-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.72rem 1.05rem;
  border: 1px solid transparent;
  border-radius: var(--hih-radius-pill);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.hih-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--hih-shadow-sm);
}

.hih-button--primary {
  color: #fff;
  background: var(--hih-navy-900);
}

.hih-button--accent {
  color: var(--hih-navy-950);
  background: var(--hih-yellow);
}

.hih-button--secondary {
  color: var(--hih-navy-900);
  background: var(--hih-paper);
  border-color: var(--hih-border-strong);
}

.hih-card {
  padding: clamp(1rem, 2vw, 1.5rem);
  background: var(--hih-paper);
  border: 1px solid var(--hih-border);
  border-radius: var(--hih-radius-md);
  box-shadow: var(--hih-shadow-sm);
}

.hih-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.25rem 0.65rem;
  color: var(--hih-teal-dark);
  background: var(--hih-mint);
  border-radius: var(--hih-radius-pill);
  font-size: 0.78rem;
  font-weight: 750;
}

.hih-callout {
  padding: 1rem 1.15rem;
  color: var(--hih-navy-900);
  background: #fff9d9;
  border: 1px solid #f2db70;
  border-radius: var(--hih-radius-sm);
}

/* Marketing surfaces */
html[data-hih-surface="marketing"] body {
  background:
    radial-gradient(circle at 7% 4%, rgba(73, 213, 202, 0.15), transparent 29rem),
    radial-gradient(circle at 94% 8%, rgba(247, 221, 236, 0.34), transparent 28rem),
    linear-gradient(180deg, #fff 0, var(--hih-cream) 38rem, #fff 100%) !important;
}

html[data-hih-surface="marketing"] body > header,
html[data-hih-surface="marketing"] body > nav,
html[data-hih-surface="marketing"] .site-header,
html[data-hih-surface="marketing"] .main-header,
html[data-hih-surface="marketing"] .navbar,
html[data-hih-surface="marketing"] nav.navbar {
  color: #fff;
  background: rgba(32, 39, 91, 0.97) !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 26px rgba(21, 26, 58, 0.12);
  backdrop-filter: blur(16px);
}

html[data-hih-surface="marketing"] body > header a,
html[data-hih-surface="marketing"] body > nav a,
html[data-hih-surface="marketing"] .site-header a,
html[data-hih-surface="marketing"] .main-header a,
html[data-hih-surface="marketing"] .navbar a {
  color: #fff;
}

html[data-hih-surface="marketing"] body > nav img,
html[data-hih-surface="marketing"] .site-header img,
html[data-hih-surface="marketing"] .main-header img {
  filter: brightness(0) invert(1);
}

html[data-hih-surface="marketing"] main > section:nth-of-type(3n + 2) {
  background-color: rgba(223, 248, 242, 0.38);
}

html[data-hih-surface="marketing"] .hero {
  position: relative;
}

html[data-hih-surface="marketing"] .hero::before,
html[data-hih-surface="marketing"] .hero::after {
  position: absolute;
  z-index: -1;
  width: clamp(220px, 28vw, 470px);
  aspect-ratio: 1;
  content: "";
  pointer-events: none;
  border-radius: 50%;
  filter: blur(1px);
  opacity: 0.62;
}

html[data-hih-surface="marketing"] .hero::before {
  top: -20%;
  left: -10%;
  background: linear-gradient(145deg, var(--hih-mint), var(--hih-sky));
}

html[data-hih-surface="marketing"] .hero::after {
  right: -9%;
  bottom: -28%;
  background: linear-gradient(145deg, var(--hih-pink), #fff1b8);
}

html[data-hih-surface="marketing"] .card,
html[data-hih-surface="marketing"] .feature-card,
html[data-hih-surface="marketing"] .pricing-card,
html[data-hih-surface="marketing"] .plan,
html[data-hih-surface="marketing"] details {
  border-color: var(--hih-border) !important;
  border-radius: var(--hih-radius-md) !important;
  box-shadow: var(--hih-shadow-sm);
}

html[data-hih-surface="marketing"] .card:nth-child(3n + 1),
html[data-hih-surface="marketing"] .feature-card:nth-child(3n + 1) {
  background: linear-gradient(160deg, var(--hih-paper) 40%, var(--hih-mint)) !important;
}

html[data-hih-surface="marketing"] .card:nth-child(3n + 2),
html[data-hih-surface="marketing"] .feature-card:nth-child(3n + 2) {
  background: linear-gradient(160deg, var(--hih-paper) 40%, #fff6c9) !important;
}

html[data-hih-surface="marketing"] .card:nth-child(3n),
html[data-hih-surface="marketing"] .feature-card:nth-child(3n) {
  background: linear-gradient(160deg, var(--hih-paper) 40%, var(--hih-pink)) !important;
}

html[data-hih-surface="marketing"] .pricing-card,
html[data-hih-surface="marketing"] .plan {
  background: var(--hih-paper) !important;
}

html[data-hih-surface="marketing"] .pricing-card.featured,
html[data-hih-surface="marketing"] .pricing-card.popular,
html[data-hih-surface="marketing"] .plan.popular {
  border-color: var(--hih-navy-900) !important;
  box-shadow: var(--hih-shadow-md);
}

html[data-hih-surface="marketing"] .card:hover,
html[data-hih-surface="marketing"] .feature-card:hover,
html[data-hih-surface="marketing"] .pricing-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--hih-shadow-md);
}

html[data-hih-surface="marketing"] .btn-primary,
html[data-hih-surface="marketing"] .button-primary,
html[data-hih-surface="marketing"] .cta-primary {
  color: #fff !important;
  background: var(--hih-navy-900) !important;
  border-color: var(--hih-navy-900) !important;
  border-radius: var(--hih-radius-pill) !important;
}

html[data-hih-surface="marketing"] .btn-accent,
html[data-hih-surface="marketing"] .btn-yellow {
  color: var(--hih-navy-950) !important;
  background: var(--hih-yellow) !important;
  border-color: var(--hih-yellow) !important;
  border-radius: var(--hih-radius-pill) !important;
}

/* Product applications */
html[data-hih-surface="app"] body {
  background:
    radial-gradient(circle at 100% 0, rgba(233, 228, 255, 0.4), transparent 30rem),
    var(--hih-cream) !important;
}

html[data-hih-surface="app"] aside,
html[data-hih-surface="app"] [data-sidebar],
html[data-hih-surface="app"] .sidebar {
  color: #fff;
  background: var(--hih-navy-950);
}

html[data-hih-surface="app"] aside h1,
html[data-hih-surface="app"] aside h2,
html[data-hih-surface="app"] aside h3,
html[data-hih-surface="app"] aside a,
html[data-hih-surface="app"] .sidebar h1,
html[data-hih-surface="app"] .sidebar h2,
html[data-hih-surface="app"] .sidebar h3,
html[data-hih-surface="app"] .sidebar a {
  color: inherit;
}

html[data-hih-surface="app"] [role="dialog"],
html[data-hih-surface="app"] .modal,
html[data-hih-surface="app"] .dialog {
  border: 1px solid var(--hih-border);
  border-radius: var(--hih-radius-lg);
  box-shadow: var(--hih-shadow-lg);
}

html[data-hih-surface="app"] .rounded-lg,
html[data-hih-surface="app"] .rounded-xl {
  border-radius: var(--hih-radius-md) !important;
}

/* Internal dashboards */
html[data-hih-surface="dashboard"] body {
  background:
    radial-gradient(circle at 5% 0, rgba(73, 213, 202, 0.2), transparent 28rem),
    radial-gradient(circle at 95% 0, rgba(233, 228, 255, 0.65), transparent 30rem),
    #f7f8fc !important;
}

html[data-hih-surface="dashboard"] header,
html[data-hih-surface="dashboard"] .topbar,
html[data-hih-surface="dashboard"] .header {
  color: #fff;
  background: var(--hih-navy-900) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-hih-surface="dashboard"] header h1,
html[data-hih-surface="dashboard"] header h2,
html[data-hih-surface="dashboard"] header a,
html[data-hih-surface="dashboard"] .topbar h1,
html[data-hih-surface="dashboard"] .topbar a {
  color: inherit;
}

html[data-hih-surface="dashboard"] .card,
html[data-hih-surface="dashboard"] .panel,
html[data-hih-surface="dashboard"] .widget,
html[data-hih-surface="dashboard"] .stat {
  background: var(--hih-paper);
  border-color: var(--hih-border) !important;
  border-radius: var(--hih-radius-md) !important;
  box-shadow: var(--hih-shadow-sm);
}

html[data-hih-surface="dashboard"] button[type="submit"],
html[data-hih-surface="dashboard"] .primary,
html[data-hih-surface="dashboard"] .btn-primary {
  color: #fff !important;
  background: var(--hih-navy-900) !important;
  border-color: var(--hih-navy-900) !important;
  border-radius: var(--hih-radius-pill) !important;
}

/* Editorial and personal sites retain their content-led identity. */
html[data-hih-surface="editorial"] body {
  --hih-cream: #fbfcf8;
  --hih-teal: #0b7b70;
  --hih-teal-dark: #075d55;
}

html[data-hih-surface="personal"] body {
  --hih-yellow: #ffb822;
  --hih-teal: #178e76;
  --hih-teal-dark: #0d6b59;
}

/* Product accents */
html[data-hih-accent="nut"] { --hih-teal: #0f7f85; --hih-teal-dark: #0a5f64; --hih-mint: #dff8f2; }
html[data-hih-accent="hand"] { --hih-teal: #167a6c; --hih-teal-dark: #0d5a4f; --hih-mint: #e0f4eb; }
html[data-hih-accent="lift"] { --hih-teal: #356ac3; --hih-teal-dark: #244b8c; --hih-mint: #e5efff; }
html[data-hih-accent="qms"] { --hih-teal: #208c62; --hih-teal-dark: #146646; --hih-mint: #dff6e9; }
html[data-hih-accent="nets"] { --hih-teal: #1f74b7; --hih-teal-dark: #155584; --hih-mint: #e1f1fb; }
html[data-hih-accent="links"] { --hih-teal: #8d51b8; --hih-teal-dark: #69388c; --hih-mint: #f0e5f8; }
html[data-hih-accent="runs"] { --hih-teal: #c24738; --hih-teal-dark: #8f3228; --hih-mint: #ffebe7; }
html[data-hih-accent="safe"] { --hih-teal: #178c99; --hih-teal-dark: #0f616b; --hih-mint: #ddf5f5; }

@media (prefers-reduced-motion: reduce) {
  html[data-hih-design] {
    scroll-behavior: auto;
  }

  html[data-hih-design] *,
  html[data-hih-design] *::before,
  html[data-hih-design] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 720px) {
  .hih-shell {
    width: min(calc(100% - 24px), var(--hih-content));
  }

  .hih-button {
    min-height: 46px;
  }
}

@media print {
  html[data-hih-design] body {
    color: #000 !important;
    background: #fff !important;
  }

  html[data-hih-design] nav,
  html[data-hih-design] .no-print {
    display: none !important;
  }
}