/* ==========================================================================
   01 · DESIGN TOKENS
   The whole surface is driven from here. Panes consume the --th-* palette,
   the shell consumes the full token set. Themes only override the palette
   block, never geometry.
   ========================================================================== */

:root {
  /* ---- type ---- */
  --font-body: "Inter", "Noto Sans Tamil", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Marcellus", "Mukta Malar", "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-2xs: 0.66rem;
  --text-xs:  0.73rem;
  --text-sm:  0.82rem;
  --text-md:  0.92rem;
  --text-lg:  1.05rem;
  --text-xl:  1.25rem;
  --text-2xl: 1.6rem;
  --text-3xl: 2.1rem;

  --leading-tight: 1.25;
  --leading: 1.55;
  --tracking-wide: 0.14em;

  /* ---- space (4pt grid) ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;

  /* ---- radius ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  /* ---- elevation ---- */
  --e-1: 0 1px 2px var(--th-shadow);
  --e-2: 0 2px 6px var(--th-shadow), 0 1px 2px var(--th-shadow);
  --e-3: 0 8px 24px var(--th-shadow), 0 2px 6px var(--th-shadow);
  --e-4: 0 20px 60px var(--th-shadow), 0 6px 18px var(--th-shadow);

  /* ---- motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 0.12s;
  --dur-2: 0.22s;
  --dur-3: 0.34s;

  /* ---- shell geometry ---- */
  --topbar-h: 3.5rem;
  --rail-w: 15rem;
  --rail-w-collapsed: 3.75rem;
  --content-max: 1440px;
  --z-rail: 60;
  --z-topbar: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ---- semantic status (theme-independent) ---- */
  --ok: #16a34a;
  --ok-soft: color-mix(in srgb, var(--ok) 14%, transparent);
  --warn: #d97706;
  --warn-soft: color-mix(in srgb, var(--warn) 14%, transparent);
  --danger: #dc2626;
  --danger-soft: color-mix(in srgb, var(--danger) 12%, transparent);
  --info: #0891b2;
  --info-soft: color-mix(in srgb, var(--info) 12%, transparent);

  /* legacy aliases kept so ported pane rules never fall back to unstyled */
  --mono: var(--font-mono);
  --body: var(--font-body);
  --display: var(--font-display);
}

/* ==========================================================================
   THEMES — each defines the same 18-slot palette contract
   ========================================================================== */

/* --- Saffron · Vedic Temple Daylight (Default Flagship) --- */
html[data-theme="saffron"] {
  --th-page: #fcfbf9;
  --th-page-alt: #f5ede1;
  --th-card: #ffffff;
  --th-card-alt: #fff8ef;
  --th-text: #0f172a;
  --th-text-dim: #475569;
  --th-label: #991b1b;
  --th-value: #0f172a;
  --th-line: #fed7aa;
  --th-line-soft: #ffedd5;
  --th-accent: #ea580c;
  --th-accent-soft: rgba(234, 88, 12, 0.12);
  --th-header: linear-gradient(135deg, #7f1d1d 0%, #991b1b 45%, #c2410c 100%);
  --th-header-text: #ffffff;
  --th-tabs: #ffffff;
  --th-tab-active: #fff7ed;
  --th-input-bg: #ffffff;
  --th-shadow: rgba(120, 53, 15, 0.08);
  --th-btn-text: #ffffff;
  color-scheme: light;
}

/* --- Cream · warm daylight --- */
html[data-theme="cream"] {
  --th-page: #fdfbf7;
  --th-page-alt: #f8f1e4;
  --th-card: #ffffff;
  --th-card-alt: #fffbf0;
  --th-text: #18181b;
  --th-text-dim: #52525b;
  --th-label: #92400e;
  --th-value: #18181b;
  --th-line: #e7e0d3;
  --th-line-soft: #f4ecdf;
  --th-accent: #c2410c;
  --th-accent-soft: color-mix(in srgb, #c2410c 12%, transparent);
  --th-header: linear-gradient(180deg, #ffffff, #faf4e8);
  --th-header-text: #18181b;
  --th-tabs: #ffffff;
  --th-tab-active: #fffbf0;
  --th-input-bg: #ffffff;
  --th-shadow: rgba(90, 62, 34, 0.08);
  --th-btn-text: #ffffff;
  color-scheme: light;
}

/* --- JHora · cool research --- */
html[data-theme="jhora"] {
  --th-page: #f5f7f6;
  --th-page-alt: #eaefed;
  --th-card: #ffffff;
  --th-card-alt: #eef3f1;
  --th-text: #24313a;
  --th-text-dim: #5f7079;
  --th-label: #14635f;
  --th-value: #7a3b12;
  --th-line: #d8e0dd;
  --th-line-soft: #e8eeec;
  --th-accent: #0f766e;
  --th-accent-soft: color-mix(in srgb, #0f766e 12%, transparent);
  --th-header: linear-gradient(180deg, #ffffff, #f5f7f6);
  --th-header-text: #24313a;
  --th-tabs: #ffffff;
  --th-tab-active: #eef3f1;
  --th-input-bg: #ffffff;
  --th-shadow: rgba(20, 60, 55, 0.10);
  --th-btn-text: #f2fbf9;
  color-scheme: light;
}

/* --- Parchment · almanac --- */
html[data-theme="parchment"] {
  --th-page: #f4ecdd;
  --th-page-alt: #ece0cb;
  --th-card: #fdf8ef;
  --th-card-alt: #f3e8d4;
  --th-text: #40342a;
  --th-text-dim: #7f6f5c;
  --th-label: #8a5a2b;
  --th-value: #6b3f18;
  --th-line: #ddcdb2;
  --th-line-soft: #eadfc9;
  --th-accent: #9a3412;
  --th-accent-soft: color-mix(in srgb, #9a3412 12%, transparent);
  --th-header: linear-gradient(180deg, #fdf8ef, #f4ecdd);
  --th-header-text: #40342a;
  --th-tabs: #fdf8ef;
  --th-tab-active: #f3e8d4;
  --th-input-bg: #fffdf8;
  --th-shadow: rgba(96, 68, 34, 0.12);
  --th-btn-text: #fdf8ef;
  color-scheme: light;
}

/* --- Night · indigo (dark) --- */
html[data-theme="night"] {
  --th-page: #0b0e1c;
  --th-page-alt: #121732;
  --th-card: #151b36;
  --th-card-alt: #1c2246;
  --th-text: #e6e8f5;
  --th-text-dim: #9aa1c4;
  --th-label: #f0c169;
  --th-value: #e6e8f5;
  --th-line: #29305a;
  --th-line-soft: #1f2547;
  --th-accent: #e8a33d;
  --th-accent-soft: color-mix(in srgb, #e8a33d 16%, transparent);
  --th-header: linear-gradient(180deg, #151b36, #0b0e1c);
  --th-header-text: #e6e8f5;
  --th-tabs: #151b36;
  --th-tab-active: #232a52;
  --th-input-bg: #10152c;
  --th-shadow: rgba(0, 0, 0, 0.45);
  --th-btn-text: #14182e;
  color-scheme: dark;
}

/* --- Ocean · deep blue (dark) --- */
html[data-theme="ocean"] {
  --th-page: #08131f;
  --th-page-alt: #0d1e30;
  --th-card: #10233a;
  --th-card-alt: #163050;
  --th-text: #dff0fb;
  --th-text-dim: #8fadc4;
  --th-label: #5ec8d8;
  --th-value: #dff0fb;
  --th-line: #1e3d5c;
  --th-line-soft: #16304a;
  --th-accent: #22b8cf;
  --th-accent-soft: color-mix(in srgb, #22b8cf 16%, transparent);
  --th-header: linear-gradient(180deg, #10233a, #08131f);
  --th-header-text: #dff0fb;
  --th-tabs: #10233a;
  --th-tab-active: #163050;
  --th-input-bg: #0b1c2e;
  --th-shadow: rgba(0, 10, 20, 0.5);
  --th-btn-text: #06202a;
  color-scheme: dark;
}

/* --- Forest · earth (dark) --- */
html[data-theme="forest"] {
  --th-page: #0e1712;
  --th-page-alt: #14231b;
  --th-card: #172619;
  --th-card-alt: #1e3323;
  --th-text: #e2ecdf;
  --th-text-dim: #93a894;
  --th-label: #b7d47f;
  --th-value: #e2ecdf;
  --th-line: #274031;
  --th-line-soft: #1d3225;
  --th-accent: #86b64b;
  --th-accent-soft: color-mix(in srgb, #86b64b 16%, transparent);
  --th-header: linear-gradient(180deg, #172619, #0e1712);
  --th-header-text: #e2ecdf;
  --th-tabs: #172619;
  --th-tab-active: #1e3323;
  --th-input-bg: #101c14;
  --th-shadow: rgba(0, 12, 4, 0.5);
  --th-btn-text: #101a10;
  color-scheme: dark;
}

/* Default palette if no data-theme attribute is present yet. */
html:not([data-theme]) {
  --th-page: #fcfbf9; --th-page-alt: #f5ede1; --th-card: #ffffff;
  --th-card-alt: #fff8ef; --th-text: #0f172a; --th-text-dim: #475569;
  --th-label: #991b1b; --th-value: #0f172a; --th-line: #fed7aa;
  --th-line-soft: #ffedd5; --th-accent: #ea580c;
  --th-accent-soft: rgba(234, 88, 12, 0.12);
  --th-header: linear-gradient(135deg, #7f1d1d 0%, #991b1b 45%, #c2410c 100%);
  --th-header-text: #ffffff; --th-tabs: #ffffff;
  --th-tab-active: #fff7ed; --th-input-bg: #ffffff;
  --th-shadow: rgba(120, 53, 15, 0.08); --th-btn-text: #ffffff;
}

/* Derived helpers every theme inherits. */
html[data-theme], html:not([data-theme]) {
  --th-accent-hover: color-mix(in srgb, var(--th-accent) 82%, var(--th-text));
  --th-hover: color-mix(in srgb, var(--th-accent) 7%, transparent);
  --th-selected: color-mix(in srgb, var(--th-accent) 14%, transparent);
  --th-ring: color-mix(in srgb, var(--th-accent) 45%, transparent);

  /* Semantic aliases guaranteed across all daylight/light themes */
  --th-ink: var(--th-text);
  --th-muted: var(--th-text-dim);
  --th-card-header: var(--th-card-alt);
  --th-ok: #15803d;
  --th-ok-bg: #dcfce7;
  --th-bad: #b91c1c;
  --th-bad-bg: #fee2e2;
  --th-warn: #b45309;
  --th-warn-bg: #fef3c7;

  /* legacy names used by ported pane rules */
  --ink-deep: var(--th-page);
  --ink: var(--th-card);
  --ink-raise: var(--th-card-alt);
  --line: var(--th-line);
  --parchment: var(--th-text);
  --parchment-dim: var(--th-text-dim);
  --marigold: var(--th-accent);
  --marigold-soft: var(--th-accent-soft);
  --teal: var(--info);
  --hub-text: var(--th-text);
  --hub-text-dim: var(--th-text-dim);
  --hub-brown: var(--th-accent);
  --hub-brown-dark: var(--th-label);
  --hub-line: var(--th-line);
  --hub-cream: var(--th-page);
  --hub-cream-card: var(--th-card);

  /* ---------- chart type scale ----------
     Everything written inside a chart cell sizes from these four, so the
     charts can be made legible in one place instead of across twenty
     scattered rules.

     They were set in the 0.42rem-0.58rem range -- 6.7px to 9.3px.  A cell
     in the natal charts is around 97px square, so the text was a fraction
     of the room it had, and Tamil and Devanagari carry far more detail per
     glyph than Latin does: at 7px the conjuncts are a smudge.  These sizes
     fill the cell the chart already reserves. */
  --chart-fs-planet: 0.78rem;   /* 12.5px -- planet chips, the thing read most */
  --chart-fs-sign:   0.66rem;   /* 10.5px -- rasi name on the cell head */
  --chart-fs-cusp:   0.62rem;   /* 10px   -- degrees and cusps */
  --chart-fs-micro:  0.58rem;   /*  9.3px -- sign numbers, relation rows */
  --chart-fs-dense:  0.69rem;   /* 11px   -- chips in a crowded cell */
}

/* A phone cell is roughly half the width, so the scale steps down with it
   rather than letting the chips wrap to one glyph per line. */
@media (max-width: 760px) {
  html[data-theme], html:not([data-theme]) {
    --chart-fs-planet: 0.64rem;
    --chart-fs-sign:   0.68rem;
    --chart-fs-cusp:   0.58rem;
    --chart-fs-micro:  0.52rem;
    --chart-fs-dense:  0.54rem;
  }
}

/* Dark theme semantic status tokens */
html[data-theme="night"],
html[data-theme="ocean"],
html[data-theme="forest"] {
  --th-ok: #4ade80;
  --th-ok-bg: rgba(34, 197, 94, 0.22);
  --th-bad: #f87171;
  --th-bad-bg: rgba(239, 68, 68, 0.22);
  --th-warn: #fbbf24;
  --th-warn-bg: rgba(245, 158, 11, 0.22);
}