/* ═══════════════════════════════════════════════════════════════ themes.css — سيولتي (Siyulati) · Color System (مصدر الحقيقة الوحيد) ✅ اللوحة معتمدة من ملفَّي ASE (داكن/فاتح) — كل لون تصميم هنا يُشتقّ منها أو يُمزج منها بـcolor-mix، ولا لون حرفي خارج هذا الملف: داكن: Ink #191919 (خلفية) · Graphite #303030 (بطاقات) · Taupe #3f3f3f (ارتفاع/حدود) · Black #000000 (عمق) · White Smoke #efefef · Dark Gray #a5a5a5 · Dim Gray #6e6d6c · Main Steel Blue #5a8abd (لون التمييز) فاتح: White Smoke #f3f3f3 (خلفية) · White #ffffff (بطاقات) · Dark Gray #afafaf (حدود) · Ink #191919 (نص) · Dim Gray #666666 · Light Slate Gray #8f8f8f · Main Sapphire #1a59ad (لون التمييز) ✅ اللوحة بلا ألوان سوق (أخضر/أحمر/كهرماني) — بقيت --up/--dn/--warn كما كانت لأنها دلالات تداول لا هوية. ✅ رموز الرسم البياني (--chart-*) بصيغة hex صريحة لأن مكتبة TradingView لا تقبل color-mix؛ js/chart/*.js يقرؤها وقت التشغيل من :root فيتبع الرسم أي تغيير هنا تلقائياً (بدل ألوان حرفية داخل JS). ✅ الأسماء (--ac, --up, --dn, --bg-app...) لم تتغيّر — كل ملف يستهلكها بـvar() فيكفي تغيير القيم هنا. الأسماء المستعارة (--bg/--card/--text/ --accent/--green/--red) لأن oc/css/oc.css يقرؤها. ✅ رموز الزجاج (--glass-*) لبطاقات الأسواق، و(--field-*) لكل حقل إدخال (css/brand.css يطبّقها على كل input/select/textarea تلقائياً). ✅ الافتراضي داكن؛ التبديل عبر [data-theme="dark|light"] على . ═══════════════════════════════════════════════════════════════ */ @layer themes { /* ════════════════════════════════════ DARK — الافتراضي (أسود كلاسيكي) ════════════════════════════════════ */ /* ════════════════════════════════════ DARK — الافتراضي (Ink / Graphite / Steel Blue) ════════════════════════════════════ */ :root, [data-theme="dark"] { --bg-app: #191919; /* Ink */ --bg-card: #303030; /* Graphite */ --bg-elev: #3f3f3f; /* Taupe */ --bg-input: #191919; /* Ink — حقول "غائرة" داخل البطاقات */ --bg-deep: #000000; /* Black */ --bg-overlay: rgba(0,0,0,.88); --border: #3f3f3f; --border-strong: color-mix(in srgb, #3f3f3f, #6e6d6c 60%); --border-subtle: rgba(255,255,255,.07); /* Accent — Main Steel Blue */ --ac: #5a8abd; --ac-2: color-mix(in srgb, #5a8abd 70%, black); --ac-dim: rgba(90,138,189,.22); --ac-deep: color-mix(in srgb, #5a8abd 70%, black); --ac-soft: var(--ac); /* Trading semantics (ليست من اللوحة — دلالات سوق ثابتة) */ --up: #10b981; --up-2: color-mix(in srgb, #10b981 70%, black); --up-dim: rgba(16,185,129,.18); --dn: #ef4444; --dn-2: color-mix(in srgb, #ef4444 70%, black); --dn-dim: rgba(239,68,68,.18); --warn: #f59e0b; --warn-2: color-mix(in srgb, #f59e0b 55%, black); --warn-dim: rgba(245,158,11,.18); --tp: #10b981; --tp-dim: rgba(16,185,129,.18); --sl: #f59e0b; --sl-dim: rgba(245,158,11,.18); /* Text — White Smoke / Dark Gray / Dim Gray */ --text-primary: #efefef; --text-secondary: #a5a5a5; --text-muted: #6e6d6c; /* Shadows */ --shadow: 0 10px 25px -5px rgba(0,0,0,.6); --shadow-sm: 0 4px 14px -4px rgba(0,0,0,.5); /* Glows */ --glow-ac: 0 0 16px var(--ac-dim), 0 0 32px rgba(90,138,189,.10); --glow-up: 0 0 16px var(--up-dim); --glow-dn: 0 0 16px var(--dn-dim); --glow-bdr: 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 rgba(255,255,255,.04); --tglow-up: 0 0 12px rgba(16,185,129,.5); --tglow-dn: 0 0 12px rgba(239,68,68,.5); /* Scrollbar */ --sb-thumb: #3f3f3f; --sb-thumb-hover: color-mix(in srgb, #3f3f3f, #a5a5a5 35%); --sb-track-hover: rgba(90,138,189,.12); /* زجاج: بطاقات شفافة فوق خلفية متدرّجة + حقول إدخال واضحة */ --glass-bg: rgba(255,255,255,.06); --glass-border: rgba(255,255,255,.12); --glass-hi: rgba(255,255,255,.07); --glass-shadow: 0 8px 24px -10px rgba(0,0,0,.55); --glass-blur: 16px; --field-bg: rgba(255,255,255,.07); --field-border: rgba(255,255,255,.18); /* رموز الرسم البياني — hex صريح (TradingView لا يقبل color-mix) */ --chart-bg: #191919; --chart-toolbar: #303030; --chart-scale-text: #a5a5a5; --chart-scale-line: #3f3f3f; --chart-cross: #6e6d6c; /* Legacy aliases (inline JS يستخدمها) */ --hc-up: var(--up); --hc-dn: var(--dn); --hc-ac: var(--ac); --hc-warn: var(--warn); --hc-tp: var(--tp); --hc-sl: var(--sl); /* أسماء مستعارة لـ oc/css/oc.css */ --bg: var(--bg-app); --card: var(--bg-card); --text: var(--text-primary); --accent: var(--ac); --green: var(--up); --red: var(--dn); /* اللوجو (الأيقونة الاحتياطية 💧 فقط) */ --logo-grad-1: #5a8abd; --logo-grad-2: #3e607f; --logo-glow: rgba(90,138,189,.4); color-scheme: dark; } /* ════════════════════════════════════ LIGHT ════════════════════════════════════ */ [data-theme="light"] { --bg-app: #f3f3f3; /* White Smoke */ --bg-card: #ffffff; /* White */ --bg-elev: color-mix(in srgb, #f3f3f3, #afafaf 22%); --bg-input: #f3f3f3; --bg-deep: #191919; /* Ink */ --bg-overlay: rgba(243,243,243,.85); --border: color-mix(in srgb, #afafaf 60%, #f3f3f3); --border-strong: #afafaf; /* Dark Gray */ --border-subtle: rgba(0,0,0,.05); /* Accent — Main Sapphire */ --ac: #1a59ad; --ac-2: color-mix(in srgb, #1a59ad 70%, black); --ac-dim: rgba(26,89,173,.14); --ac-deep: color-mix(in srgb, #1a59ad 80%, black); --ac-soft: var(--ac); --up: #10b981; --up-2: color-mix(in srgb, #10b981 65%, black); --up-dim: rgba(16,185,129,.14); --dn: #ef4444; --dn-2: color-mix(in srgb, #ef4444 65%, black); --dn-dim: rgba(239,68,68,.14); --warn: #f59e0b; --warn-2: color-mix(in srgb, #f59e0b 55%, black); --warn-dim: rgba(245,158,11,.14); --tp: #10b981; --tp-dim: rgba(16,185,129,.14); --sl: #f59e0b; --sl-dim: rgba(245,158,11,.14); /* Text — Ink / Dim Gray / Light Slate Gray */ --text-primary: #191919; --text-secondary: #666666; --text-muted: #8f8f8f; --shadow: 0 10px 25px -5px rgba(0,0,0,.10); --shadow-sm: 0 3px 10px -3px rgba(0,0,0,.08); --glow-ac: 0 0 10px rgba(26,89,173,.18); --glow-up: 0 0 8px rgba(16,185,129,.18); --glow-dn: 0 0 8px rgba(239,68,68,.18); --glow-bdr: 0 0 0 1px rgba(26,89,173,.12), inset 0 1px 0 rgba(255,255,255,.9); --tglow-up: none; --tglow-dn: none; --sb-thumb: color-mix(in srgb, #afafaf 60%, #f3f3f3); --sb-thumb-hover: #afafaf; --sb-track-hover: rgba(26,89,173,.08); --glass-bg: rgba(255,255,255,.62); --glass-border: rgba(25,25,25,.09); --glass-hi: rgba(255,255,255,.9); --glass-shadow: 0 8px 24px -12px rgba(0,0,0,.18); --glass-blur: 16px; --field-bg: rgba(255,255,255,.72); --field-border: rgba(25,25,25,.18); --chart-bg: #f3f3f3; --chart-toolbar: #ffffff; --chart-scale-text: #666666; --chart-scale-line: #d4d4d4; --chart-cross: #8f8f8f; --hc-up: var(--up); --hc-dn: var(--dn); --hc-ac: var(--ac); --hc-warn: var(--warn); --hc-tp: var(--tp); --hc-sl: var(--sl); --bg: var(--bg-app); --card: var(--bg-card); --text: var(--text-primary); --accent: var(--ac); --green: var(--up); --red: var(--dn); --logo-grad-1: #1a59ad; --logo-grad-2: #123d78; --logo-glow: rgba(26,89,173,.35); color-scheme: light; } } /* @layer themes */