/* ═══════════════════════════════════════════════════════════════════
   INDDN — shared design tokens + Indian motifs.

   Ported from `static-html/theme.css` + `static-html/tw-config.js` into
   plain CSS custom properties so every page (Blade or legacy) can opt in
   without a Tailwind build step.

   Dark mode re-declares the same token names under `body.dark`, which is
   the class `partials/dark-mode.blade.php` already toggles — so anything
   built on these tokens gets dark mode for free.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --ind-radius: 0.5rem;

  --ind-background: oklch(0.99 0.008 90);
  --ind-foreground: oklch(0.24 0.03 265);
  --ind-card: oklch(1 0 0);
  --ind-card-foreground: oklch(0.24 0.03 265);
  --ind-popover: oklch(1 0 0);
  --ind-primary: oklch(0.36 0.11 265);
  --ind-primary-foreground: oklch(0.98 0.01 90);
  --ind-secondary: oklch(0.96 0.02 85);
  --ind-secondary-foreground: oklch(0.32 0.06 265);
  --ind-muted: oklch(0.96 0.015 85);
  --ind-muted-foreground: oklch(0.52 0.03 255);
  --ind-accent: oklch(0.95 0.04 75);
  --ind-accent-foreground: oklch(0.36 0.11 265);
  --ind-destructive: oklch(0.577 0.245 27.325);
  --ind-border: oklch(0.9 0.02 80);
  --ind-input: oklch(0.9 0.02 80);
  --ind-ring: oklch(0.68 0.16 55);

  --ind-saffron: oklch(0.72 0.17 55);
  /* Ink ON a saffron fill. Deliberately dark: near-white on saffron measures
     only 2.55:1, which fails on buttons and pills. Dark ink gives ~6:1. */
  --ind-saffron-foreground: oklch(0.26 0.06 55);
  --ind-indiagreen: oklch(0.5 0.12 155);
  --ind-indigoblue: oklch(0.36 0.11 265);
  --ind-cream: oklch(0.97 0.02 85);
  --ind-gold: oklch(0.82 0.13 85);
  --ind-teal: oklch(0.62 0.1 190);
  --ind-royal: oklch(0.45 0.19 265);
  --ind-visited: oklch(0.45 0.12 310);

  /* ── Ink scale ──────────────────────────────────────────────────────
     The brand hues are mid-lightness, so using them directly as text or
     icon colour on a pale tint lands around 1.5–2.9:1. These are the
     readable counterparts — darkened for light mode, lightened for dark —
     and are what small text, badges and icons should use. */
  --ind-saffron-ink: oklch(0.5 0.16 45);
  --ind-teal-ink: oklch(0.45 0.09 195);
  --ind-gold-ink: oklch(0.5 0.11 75);
  --ind-green-ink: oklch(0.42 0.11 155);
  --ind-red-ink: oklch(0.48 0.19 27);
  --ind-violet-ink: oklch(0.45 0.14 310);

  /* The white band of the tiranga rule — near-white in light mode so the
     tricolour reads correctly against the cream page. */
  --ind-tiranga-white: oklch(0.99 0.005 90);

  /* Modern geometric sans throughout; Noto Sans Devanagari carries the Indic
     scripts so Hindi/Marathi text keeps the same weight and rhythm. */
  --ind-font-sans: "Plus Jakarta Sans", "Noto Sans Devanagari", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ind-font-display: "Outfit", "Noto Sans Devanagari", ui-sans-serif, system-ui, sans-serif;
  --ind-font-brand: "Yatra One", "Outfit", sans-serif;

  --ind-shadow-sm: 0 1px 3px oklch(0.24 0.03 265 / 0.08);
  --ind-shadow-md: 0 6px 24px oklch(0.24 0.03 265 / 0.10);
  --ind-shadow-lg: 0 12px 40px oklch(0.24 0.03 265 / 0.14);
}

/* ── Dark mode ──────────────────────────────────────────────────────
   Same token names, re-tuned. `body.dark` is set by the existing
   dark-mode partial; `html.dark` is set alongside it, so cover both. */
body.dark {
  --ind-background: oklch(0.19 0.02 265);
  --ind-foreground: oklch(0.94 0.01 90);
  --ind-card: oklch(0.24 0.025 265);
  --ind-card-foreground: oklch(0.94 0.01 90);
  --ind-popover: oklch(0.24 0.025 265);
  --ind-primary: oklch(0.72 0.12 265);
  --ind-primary-foreground: oklch(0.16 0.02 265);
  --ind-secondary: oklch(0.28 0.03 265);
  --ind-secondary-foreground: oklch(0.92 0.01 90);
  --ind-muted: oklch(0.28 0.025 265);
  --ind-muted-foreground: oklch(0.72 0.02 255);
  --ind-accent: oklch(0.32 0.05 60);
  --ind-accent-foreground: oklch(0.93 0.03 75);
  --ind-border: oklch(0.34 0.03 265);
  --ind-input: oklch(0.34 0.03 265);
  --ind-ring: oklch(0.72 0.17 55);

  --ind-saffron: oklch(0.76 0.16 55);
  --ind-saffron-foreground: oklch(0.2 0.04 55);
  --ind-indiagreen: oklch(0.66 0.13 155);
  --ind-indigoblue: oklch(0.78 0.1 265);
  --ind-cream: oklch(0.24 0.025 265);
  --ind-gold: oklch(0.84 0.12 85);
  --ind-teal: oklch(0.7 0.1 190);
  --ind-royal: oklch(0.7 0.14 265);
  --ind-visited: oklch(0.72 0.1 310);

  /* Ink scale, lightened for dark surfaces */
  --ind-saffron-ink: oklch(0.82 0.14 55);
  --ind-teal-ink: oklch(0.8 0.09 195);
  --ind-gold-ink: oklch(0.87 0.11 85);
  --ind-green-ink: oklch(0.78 0.12 155);
  --ind-red-ink: oklch(0.75 0.16 27);
  --ind-violet-ink: oklch(0.78 0.1 310);

  --ind-tiranga-white: oklch(0.93 0.005 90);

  --ind-shadow-sm: 0 1px 3px oklch(0 0 0 / 0.5);
  --ind-shadow-md: 0 6px 24px oklch(0 0 0 / 0.55);
  --ind-shadow-lg: 0 12px 40px oklch(0 0 0 / 0.6);
}

/* ── Motifs ───────────────────────────────────────────────────────── */

/* Tricolour rule, used under headers and panel titles */
.tiranga-rule {
  height: 3px;
  background: linear-gradient(
    to right,
    var(--ind-saffron) 0 33.33%,
    var(--ind-tiranga-white) 33.33% 66.66%,
    var(--ind-indiagreen) 66.66% 100%
  );
}

/* Soft jaali motif: fine dot lattice with a warm wash — subtle, never noisy */
.jaali {
  background-image:
    radial-gradient(circle at 0% 0%, color-mix(in oklab, var(--ind-saffron) 10%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 100% 0%, color-mix(in oklab, var(--ind-indigoblue) 8%, transparent) 0%, transparent 55%),
    radial-gradient(color-mix(in oklab, var(--ind-indigoblue) 14%, transparent) 1px, transparent 1.2px),
    radial-gradient(color-mix(in oklab, var(--ind-saffron) 16%, transparent) 1px, transparent 1.2px);
  background-size: 100% 100%, 100% 100%, 18px 18px, 18px 18px;
  background-position: 0 0, 0 0, 0 0, 9px 9px;
}

/* Rangoli-style arch scallop, for panel headers */
.scallop {
  background-image: radial-gradient(
    circle at 8px 0,
    color-mix(in oklab, var(--ind-saffron) 22%, transparent) 5px,
    transparent 5.5px
  );
  background-size: 16px 10px;
  background-repeat: repeat-x;
}

/* Small paisley-ish flourish divider */
.motif-divider {
  position: relative;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in oklab, var(--ind-saffron) 45%, transparent),
    transparent
  );
}
.motif-divider::after {
  content: "\276E";
  content: "\2756";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  font-size: 0.7rem;
  line-height: 1;
  padding: 0 0.5rem;
  color: color-mix(in oklab, var(--ind-saffron) 80%, transparent);
  background: var(--ind-background);
}

/* ── Brand wordmark ───────────────────────────────────────────────── */
.ind-wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--ind-font-brand);
  letter-spacing: -0.01em;
  line-height: 1;
  font-size: 54px;
}
@media (min-width: 640px) {
  .ind-wordmark { font-size: 76px; }
}
.ind-wordmark .wm-i,
.ind-wordmark .wm-n1 { color: var(--ind-saffron); }
.ind-wordmark .wm-d1 { color: var(--ind-gold); }
.ind-wordmark .wm-d2 { color: var(--ind-teal); }
.ind-wordmark .wm-n2 { color: var(--ind-royal); }
.ind-wordmark .wm-chakra {
  margin-left: 0.04em;
  align-self: center;
  color: var(--ind-saffron);
  transition: transform 0.35s var(--ind-ease, ease);
}
.ind-wordmark .wm-chakra svg {
  height: 0.62em;
  width: 0.62em;
  display: block;
}
.ind-wordmark:hover .wm-chakra { transform: rotate(45deg); }

/* ── Mobile bottom navigation ─────────────────────────────────────── */
#mobile-bottom-nav {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid var(--ind-border);
  background: color-mix(in oklab, var(--ind-card) 95%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0.35rem 0.25rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
}
#mobile-bottom-nav a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--ind-muted-foreground);
  text-decoration: none;
  transition: color 0.15s;
}
#mobile-bottom-nav a i { font-size: 1rem; }
#mobile-bottom-nav a:hover { color: var(--ind-indigoblue); }
#mobile-bottom-nav a.active { color: var(--ind-saffron); }
#mobile-bottom-nav a.active::before {
  content: "";
  position: absolute;
  top: -0.35rem;
  left: 50%;
  translate: -50% 0;
  width: 1rem;
  height: 2px;
  border-radius: 1px;
  background: var(--ind-saffron);
}
@media (max-width: 1023px) {
  #mobile-bottom-nav { display: flex; }
  body { padding-bottom: 4.25rem; }
  #back-to-top { bottom: 5.5rem !important; }
}

/* ── Back to top ──────────────────────────────────────────────────── */
#back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.5rem;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--ind-border);
  border-radius: 9999px;
  background: var(--ind-card);
  color: var(--ind-indigoblue);
  box-shadow: var(--ind-shadow-md);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#back-to-top.is-visible { display: flex; }
#back-to-top:hover {
  background: var(--ind-saffron);
  border-color: var(--ind-saffron);
  color: var(--ind-saffron-foreground);
}

/* ── Settings modal ───────────────────────────────────────────────── */
#settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
  padding-top: 4rem;
  background: color-mix(in oklab, var(--ind-primary) 30%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow-y: auto;
}
#settings-overlay[hidden] { display: none; }

.ind-modal {
  width: 100%;
  max-width: 28rem;
  overflow: hidden;
  border: 1px solid var(--ind-border);
  border-radius: 0.75rem;
  background: var(--ind-card);
  box-shadow: var(--ind-shadow-lg);
  font-family: var(--ind-font-sans);
  color: var(--ind-foreground);
}
.ind-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--ind-border);
}
.ind-modal-head h2 {
  font-family: var(--ind-font-display);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ind-indigoblue);
  margin: 0;
}
.ind-modal-close {
  border: none;
  background: none;
  padding: 0.25rem 0.4rem;
  border-radius: 0.375rem;
  color: var(--ind-muted-foreground);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ind-modal-close:hover {
  background: var(--ind-accent);
  color: var(--ind-foreground);
}
.ind-modal-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem;
}
.ind-modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--ind-border);
  background: var(--ind-cream);
}

.ind-setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}
.ind-setting-row p { margin: 0; }
.ind-setting-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ind-foreground);
}
.ind-setting-hint {
  font-size: 0.75rem;
  color: var(--ind-muted-foreground);
}

/* Toggle switch */
.ind-switch {
  height: 1.5rem;
  width: 2.75rem;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 1px solid var(--ind-border);
  background: var(--ind-muted);
  padding: 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ind-switch > span {
  display: block;
  height: 1rem;
  width: 1rem;
  border-radius: 9999px;
  background: var(--ind-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transform: translateX(0.25rem);
  transition: transform 0.15s;
}
.ind-switch[aria-checked="true"] {
  background: var(--ind-saffron);
  border-color: var(--ind-saffron);
}
.ind-switch[aria-checked="true"] > span { transform: translateX(1.5rem); }

/* Choice pills */
.ind-choice-label {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ind-foreground);
}
.ind-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.ind-choice {
  border-radius: 9999px;
  border: 1px solid var(--ind-border);
  background: transparent;
  padding: 0.25rem 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--ind-muted-foreground);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ind-choice:hover {
  border-color: var(--ind-saffron);
  color: var(--ind-foreground);
}
.ind-choice[aria-pressed="true"] {
  border-color: var(--ind-saffron);
  background: var(--ind-accent);
  font-weight: 600;
  color: var(--ind-indigoblue);
}

/* Buttons */
.ind-btn-ghost {
  border: none;
  background: none;
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--ind-muted-foreground);
  cursor: pointer;
  transition: color 0.15s;
}
.ind-btn-ghost:hover { color: var(--ind-foreground); }

.ind-btn-primary {
  border: none;
  border-radius: 0.375rem;
  background: var(--ind-saffron);
  padding: 0.375rem 1rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ind-saffron-foreground);
  cursor: pointer;
  transition: background 0.15s;
}
.ind-btn-primary:hover { background: var(--ind-indigoblue); }

/* Screen-reader-only helper */
.ind-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}