/* ============================================================ FarooqStars 2.0 — observatory/assets/obs-theme.css (v2 · 7 Oct 2026 · K1 round 7: --menu-quiet token · v1 · 7 Oct 2026 · FA-001 Observatory colours, AI1-Claude1) Farooq's decision (7 Oct 2026): the Observatory must look like the same website, night and day. ONE shared stylesheet for the 12 Observatory pages (it replaces 12 inline copies of the family layer): 1. the SITE colour tokens — copied line-for-line from assets/css/fs-design.css (v20, "Law 3": never hard-code a colour on a page, variables only). Dark by default, [data-theme="light"] = day. When fs-design.css changes its tokens, copy the same lines here. 2. the Observatory's old variable names pointed at the site variables (--panel, --mut, --dim …), so the pages' own rules follow the site colours without a second palette. 3. planet / element / aspect / sign-text colours — all made from site variables. 4. the night sky: the 3D sky and the drawing canvases stay a dark night sky in BOTH themes (Farooq: the 3D graphics are not touched) — their fixed colours live here, once. 5. the family layer (instrument chips, guide, family cards) — only site variables. ============================================================ */ /* ---------- tokens: DARK (default) ---------- */ :root{ --bg:#070d1e; --bg2:#0c1530; --card:#0f1a33; --card2:#152039; --line:#2c4070; --ink:#f3eee5; --muted:#93a0bc; --gold:#d9b36c; --gold-ink:#231903; --pur:#a796ec; --pur-ink:#120e28; --green:#5fc08a; --warn:#ebb552; --red:#f08b8b; --cool:#7fb0f0; --chipbg:#131e39; --shadow:0 14px 34px rgba(0,0,0,.5); --focus:#f4dda8; --menu-quiet:#93a0bc; /* K1 round 7: quiet menu section label (Site) — 6.58:1 on the drawer card */ /* the fixed 12 sign colours (same in both themes) */ --sign1:#ff5e5e; --sign2:#4fc76f; --sign3:#ffd35e; --sign4:#6fd3ff; --sign5:#ff9f45; --sign6:#9fd06c; --sign7:#ff8fc0; --sign8:#e34f6f; --sign9:#b18cff; --sign10:#8fa3b8; --sign11:#5ec9e8; --sign12:#7fe0c3; --radius:16px; --radius-s:10px; /* ---------- v78: مینو کے نشانوں کے رنگ ---------- ہر لنک کا اپنا رنگ۔ روشن theme کے لیے وہی رنگ گہرے کر کے رکھے ہیں — ورنہ سفید کارڈ پر ہلکا رنگ نظر ہی نہیں آتا (ناپ کر دیکھا: کچھ نشان 1.29:1 پر تھے، یعنی تقریباً غائب)۔ اب دونوں theme میں کم از کم 3.8:1۔ */ --ic-gold:#d9b36c; --ic-red:#ef7a7a; --ic-green:#63c98d; --ic-amber:#f0d074; --ic-sky:#74c8ee; --ic-orange:#ef9f66; --ic-lime:#a8cd7c; --ic-pink:#f09ac4; --ic-crimson:#e5738f; --ic-violet:#c78ce9; --ic-slate:#95a8c6; --ic-cyan:#4ec7d2; --ic-teal:#79d8bd; --ic-blue:#7fb0f0; --ic-purple:#a796ec; --ic-warn:#ebb552; --ic-emerald:#54cba6; } /* ---------- tokens: LIGHT ---------- */ [data-theme="light"]{ --bg:#f7f4ec; --bg2:#efe9db; --card:#ffffff; --card2:#faf7f0; --line:#cbbc99; --ink:#16233f; --muted:#4d5b76; --gold:#8a6410; --gold-ink:#fffdf5; --pur:#4a3fb0; --pur-ink:#f7f5ff; --green:#0c7a55; --warn:#8c5a08; --red:#b83232; --cool:#1d5ac0; --chipbg:#f3ecdf; --shadow:0 10px 24px rgba(20,32,60,.14); --focus:#8a6410; --menu-quiet:#4d5b76; /* K1 round 7: quiet menu section label in day — 6.83:1 on white (was gold at .6 opacity = 2.48:1) */ /* وہی رنگ، مگر سفید پر پڑھے جانے کے قابل (v78) */ --ic-gold:#8a6410; --ic-red:#b83232; --ic-green:#1e8028; --ic-amber:#736e00; --ic-sky:#046d9c; --ic-orange:#bd4a02; --ic-lime:#4f7a22; --ic-pink:#b81b58; --ic-crimson:#a81239; --ic-violet:#6740c9; --ic-slate:#4d6076; --ic-cyan:#0d7089; --ic-teal:#0b7268; --ic-blue:#1d5ac0; --ic-purple:#4a3fb0; --ic-warn:#a06828; --ic-emerald:#067e3e; } /* ---------- accent follows the section ---------- */ body[data-accent="western"]{ --accent:var(--gold); --accent-ink:var(--gold-ink); } body[data-accent="vedic"] { --accent:var(--pur); --accent-ink:var(--pur-ink); } body:not([data-accent]) { --accent:var(--gold); --accent-ink:var(--gold-ink); } /* ---------- accent follows the section (same rule as fs-design.css) ---------- */ body[data-accent="western"]{ --accent:var(--gold); --accent-ink:var(--gold-ink); } body[data-accent="vedic"] { --accent:var(--pur); --accent-ink:var(--pur-ink); } body:not([data-accent]) { --accent:var(--gold); --accent-ink:var(--gold-ink); } /* ---------- the Observatory's old names → site variables ---------- */ :root{ --panel:var(--card); --line2:var(--line); --mut:var(--muted); --dim:var(--muted); --good:var(--green); --bad:var(--red); --orange:var(--ic-orange); /* planets — the site's icon colours (fs-design.css --ic-*), one colour per planet on every Observatory page */ --pl-sun:var(--ic-gold); --pl-moon:var(--ic-slate); --pl-mercury:var(--ic-cyan); --pl-venus:var(--ic-pink); --pl-mars:var(--ic-red); --pl-jupiter:var(--ic-orange); --pl-saturn:var(--ic-amber); --pl-rahu:var(--ic-purple); --pl-ketu:var(--ic-violet); --pl-uranus:var(--ic-teal); --pl-neptune:var(--ic-blue); --pl-pluto:var(--ic-crimson); --pl-earth:var(--ic-sky); /* elements — the same four colours as matching.html (1-5-9 cards) */ --el-fire:var(--warn); --el-earth:var(--green); --el-air:var(--cool); --el-water:var(--pur); /* aspects (Zaicha list) */ --asp-Conjunction:var(--gold); --asp-Sextile:var(--ic-teal); --asp-Square:var(--red); --asp-Trine:var(--cool); --asp-Opposition:var(--ic-pink); /* sign names as TEXT: the site's fixed --sign1..12; in the day theme mixed with the ink so the words stay readable on a white card (4.6:1 or more, measured) */ --sgt1:var(--sign1); --sgt2:var(--sign2); --sgt3:var(--sign3); --sgt4:var(--sign4); --sgt5:var(--sign5); --sgt6:var(--sign6); --sgt7:var(--sign7); --sgt8:color-mix(in srgb,var(--sign8) 90%,var(--ink)); --sgt9:var(--sign9); --sgt10:var(--sign10); --sgt11:var(--sign11); --sgt12:var(--sign12); /* the night sky — the SAME in both themes (3D sky, drawing canvases, Moon pictures) */ --obs-sky:#080c13; --obs-sky-deep:#06060d; --obs-sky-glow:#2c4053; --obs-sky-line:rgba(184,203,231,.18); --obs-sky-panel:rgba(16,25,35,.72); --obs-sky-ink:#e9ecf7; --obs-sky-muted:#b5c2d3; --obs-sky-gold:#dfcfac; --obs-moon-lit:#f2f5ff; --obs-moon-mid:#98a4c6; --obs-moon-dark:#6c7699; --obs-moon2-lit:#eef2ff; --obs-moon2-mid:#93a0c4; } [data-theme="light"]{ --pl-jupiter:color-mix(in srgb,var(--ic-orange) 90%,var(--ink)); --sgt1:color-mix(in srgb,var(--sign1) 65%,var(--ink)); --sgt2:color-mix(in srgb,var(--sign2) 50%,var(--ink)); --sgt3:color-mix(in srgb,var(--sign3) 40%,var(--ink)); --sgt4:color-mix(in srgb,var(--sign4) 40%,var(--ink)); --sgt5:color-mix(in srgb,var(--sign5) 50%,var(--ink)); --sgt6:color-mix(in srgb,var(--sign6) 45%,var(--ink)); --sgt7:color-mix(in srgb,var(--sign7) 50%,var(--ink)); --sgt8:color-mix(in srgb,var(--sign8) 75%,var(--ink)); --sgt9:color-mix(in srgb,var(--sign9) 55%,var(--ink)); --sgt10:color-mix(in srgb,var(--sign10) 55%,var(--ink)); --sgt11:color-mix(in srgb,var(--sign11) 45%,var(--ink)); --sgt12:color-mix(in srgb,var(--sign12) 40%,var(--ink)); } html{color-scheme:dark} [data-theme="light"]{color-scheme:light} /* ============ Farooq Stars family layer (was inline in every page as