/* ستاكرون STACKRON — design tokens
   4 ثيمات (s1 ليل المطوّر · s2 كرّاسة · s3 ورشة · s4 وردة) × فاتح/غامق.
   القيم الأصلية من design/samples.html — أي لون في الموقع لازم ييجي من هنا. */

:root, [data-theme="s1"] {
  color-scheme: light;
  --ui: Alexandria, system-ui, sans-serif;
  --mono: 'JetBrains Mono', Alexandria, ui-monospace, monospace;
  --r-sm: 10px; --r: 14px; --r-lg: 20px;
  --bw: 1px;
  --bg: #F6F7F9; --bar: #FFFFFF; --surface: #FFFFFF;
  --fg: #14171C; --muted: #5B6472;
  --brand: #0F7B5F; --on-brand: #FFFFFF;
  --accent: #0F7B5F; --on-accent: #FFFFFF;
  --logo-bg: #0F7B5F; --logo-fg: #FFFFFF;
  --code-bg: #FFFFFF; --cur: #EEF6F3;
  --line-c: #E3E6EA;
  --frame-c: rgba(128,128,128,.25);
  --shadow: 0 12px 40px rgba(20,30,40,.12);
  --shadow-sm: 0 1px 2px rgba(20,30,40,.06), 0 4px 16px rgba(20,30,40,.05);
  --btn-shadow: none; --btn-press: none;
  --t-com: #5F6B7A; --t-kw: #8A3FC7; --t-str: #0F7B5F; --t-fn: #1F5FBF; --t-tag: #B4330F; --t-attr: #8A5A00; --t-num: #B4330F; --t-var: #14171C;
  --hint-bg: #EEF6F3; --hint-fg: #14171C; --hint-bc: transparent;
  --hl-bg: transparent; --hl-fg: #0F7B5F;
  --ok: #0F7B5F; --on-ok: #FFFFFF;
  --danger: #B42318; --on-danger: #FFFFFF;
  --warn: #8A5A00;
  --sys: #0F7B5F;
  --scrim: rgba(10,14,20,.45);
  --rule: transparent;
  --focus: #1F5FBF;
}
[data-theme="s1"][data-mode="dark"], [data-mode="dark"] [data-theme="s1"], html:not([data-theme])[data-mode="dark"] {
  color-scheme: dark;
  --bg: #0F1216; --bar: #151A20; --surface: #151A20;
  --fg: #E6E9EE; --muted: #8F99A6;
  --brand: #3DDC97; --on-brand: #06281B;
  --accent: #3DDC97; --on-accent: #06281B;
  --logo-bg: #3DDC97; --logo-fg: #06281B;
  --code-bg: #0F1216; --cur: #17212A;
  --line-c: #222A33;
  --shadow: 0 12px 40px rgba(0,0,0,.5);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --t-com: #8794A3; --t-kw: #C792EA; --t-str: #A5E8C6; --t-fn: #82AAFF; --t-tag: #FF8A65; --t-attr: #FFCB6B; --t-num: #FF8A65; --t-var: #E6E9EE;
  --hint-bg: #14241E; --hint-fg: #E6E9EE;
  --hl-fg: #3DDC97;
  --ok: #3DDC97; --on-ok: #06281B;
  --danger: #FF8A80; --on-danger: #3A0A0A;
  --warn: #FFCB6B;
  --sys: #3DDC97;
  --scrim: rgba(0,0,0,.6);
  --focus: #82AAFF;
}

/* ---------- 2 · كرّاسة ---------- */
[data-theme="s2"] {
  color-scheme: light;
  --ui: 'Readex Pro', system-ui, sans-serif;
  --mono: 'Fira Code', 'Readex Pro', ui-monospace, monospace;
  --r-sm: 14px; --r: 18px; --r-lg: 24px;
  --bw: 1px;
  --bg: #FBF7EF; --bar: #FBF7EF; --surface: #FFFDF8;
  --fg: #1D2340; --muted: #6A6F86;
  --brand: #2F45B5; --on-brand: #FFFFFF;
  --accent: #2F45B5; --on-accent: #FFFFFF;
  --logo-bg: #2F45B5; --logo-fg: #FFFFFF;
  --code-bg: #FFFDF8; --cur: #FFF3B8;
  --line-c: #ECE4D3;
  --frame-c: rgba(128,128,128,.2);
  --shadow: 0 16px 40px rgba(60,50,20,.14);
  --shadow-sm: 0 1px 0 #ECE4D3, 0 6px 18px rgba(60,50,20,.06);
  --btn-shadow: 0 2px 0 #1C2C80; --btn-press: 0 0 0 #1C2C80;
  --t-com: #5C6178; --t-kw: #B5179E; --t-str: #2E7D32; --t-fn: #2F45B5; --t-tag: #C2410C; --t-attr: #8D5B00; --t-num: #C2410C; --t-var: #1D2340;
  --hint-bg: #FFF3B8; --hint-fg: #1D2340; --hint-bc: transparent;
  --hl-bg: #FFF3B8; --hl-fg: #1D2340;
  --ok: #2E7D32; --on-ok: #FFFFFF;
  --danger: #B42318; --on-danger: #FFFFFF;
  --warn: #8D5B00;
  --sys: #2F45B5;
  --scrim: rgba(29,35,64,.4);
  --rule: rgba(47,69,181,.07);
  --focus: #2F45B5;
}
[data-theme="s2"][data-mode="dark"], [data-mode="dark"] [data-theme="s2"] {
  color-scheme: dark;
  --bg: #171A2B; --bar: #171A2B; --surface: #1C2034;
  --fg: #ECEAF4; --muted: #A3A7C2;
  --brand: #9DAEFF; --on-brand: #141A40;
  --accent: #9DAEFF; --on-accent: #141A40;
  --logo-bg: #9DAEFF; --logo-fg: #141A40;
  --code-bg: #1C2034; --cur: #2C2A1A;
  --line-c: #2A2F48;
  --shadow: 0 16px 40px rgba(0,0,0,.5);
  --shadow-sm: 0 1px 0 #2A2F48;
  --btn-shadow: 0 2px 0 #5E70CC; --btn-press: 0 0 0 #5E70CC;
  --t-com: #A3A7C2; --t-kw: #F59AE5; --t-str: #9BE39E; --t-fn: #9DAEFF; --t-tag: #FFAB7A; --t-attr: #F2CC6B; --t-num: #FFAB7A; --t-var: #ECEAF4;
  --hint-bg: #2C2A1A; --hint-fg: #ECEAF4;
  --hl-bg: #2C2A1A; --hl-fg: #F2CC6B;
  --ok: #9BE39E; --on-ok: #0B2A12;
  --danger: #FF8A80; --on-danger: #3A0A0A;
  --warn: #F2CC6B;
  --sys: #9DAEFF;
  --scrim: rgba(0,0,0,.6);
  --rule: rgba(157,174,255,.05);
  --focus: #9DAEFF;
}

/* ---------- 3 · ورشة ---------- */
[data-theme="s3"] {
  color-scheme: light;
  --ui: Rubik, system-ui, sans-serif;
  --mono: 'JetBrains Mono', Rubik, ui-monospace, monospace;
  --r-sm: 8px; --r: 10px; --r-lg: 14px;
  --bw: 2px;
  --bg: #F2F1EC; --bar: #F2F1EC; --surface: #FFFFFF;
  --fg: #16181D; --muted: #5A5D66;
  --brand: #16181D; --on-brand: #D7FF3A;
  --accent: #D7FF3A; --on-accent: #16181D;
  --logo-bg: #16181D; --logo-fg: #D7FF3A;
  --code-bg: #FFFFFF; --cur: #F3FFC7;
  --line-c: #16181D;
  --frame-c: #16181D;
  --shadow: 6px 6px 0 #16181D;
  --shadow-sm: 4px 4px 0 #16181D;
  --btn-shadow: 3px 3px 0 #16181D; --btn-press: 0 0 0 #16181D;
  --t-com: #5A5D66; --t-kw: #6B2BD9; --t-str: #1E7A34; --t-fn: #1D4ED8; --t-tag: #C2410C; --t-attr: #8A5A00; --t-num: #C2410C; --t-var: #16181D;
  --hint-bg: #D7FF3A; --hint-fg: #16181D; --hint-bc: #16181D;
  --hl-bg: #D7FF3A; --hl-fg: #16181D;
  --ok: #1E7A34; --on-ok: #FFFFFF;
  --danger: #B42318; --on-danger: #FFFFFF;
  --warn: #8A5A00;
  --sys: #6B2BD9;
  --scrim: rgba(22,24,29,.5);
  --rule: transparent;
  --focus: #6B2BD9;
}
[data-theme="s3"][data-mode="dark"], [data-mode="dark"] [data-theme="s3"] {
  color-scheme: dark;
  --bg: #16181D; --bar: #16181D; --surface: #1D2026;
  --fg: #F2F1EC; --muted: #A3A6AE;
  --brand: #D7FF3A; --on-brand: #16181D;
  --accent: #D7FF3A; --on-accent: #16181D;
  --logo-bg: #D7FF3A; --logo-fg: #16181D;
  --code-bg: #1D2026; --cur: #262C17;
  --line-c: #2C3038;
  --frame-c: #D7FF3A;
  --shadow: 6px 6px 0 #D7FF3A;
  --shadow-sm: 4px 4px 0 #000000;
  --btn-shadow: 3px 3px 0 #000000; --btn-press: 0 0 0 #000000;
  --t-com: #A3A6AE; --t-kw: #C4A1FF; --t-str: #9BE39E; --t-fn: #8DB4FF; --t-tag: #FF9D6B; --t-attr: #F2CC6B; --t-num: #FF9D6B; --t-var: #F2F1EC;
  --hint-bg: #262C17; --hint-fg: #F2F1EC; --hint-bc: #D7FF3A;
  --hl-bg: transparent; --hl-fg: #D7FF3A;
  --ok: #9BE39E; --on-ok: #0B2A12;
  --danger: #FF8A80; --on-danger: #3A0A0A;
  --warn: #F2CC6B;
  --sys: #D7FF3A;
  --scrim: rgba(0,0,0,.65);
  --focus: #D7FF3A;
}

/* ---------- 4 · وردة ---------- */
[data-theme="s4"] {
  color-scheme: light;
  --ui: Alexandria, system-ui, sans-serif;
  --mono: 'JetBrains Mono', Alexandria, ui-monospace, monospace;
  --r-sm: 16px; --r: 22px; --r-lg: 28px;
  --bw: 1px;
  --bg: #FFF6F9; --bar: #FFF6F9; --surface: #FFFFFF;
  --fg: #3A1A2B; --muted: #7A5466;
  --brand: #B8326A; --on-brand: #FFFFFF;
  --accent: #B8326A; --on-accent: #FFFFFF;
  --logo-bg: #B8326A; --logo-fg: #FFFFFF;
  --code-bg: #FFFFFF; --cur: #FDE6EE;
  --line-c: #F6DCE6;
  --frame-c: #F3D3DF;
  --shadow: 0 16px 40px rgba(184,50,106,.16);
  --shadow-sm: 0 6px 20px rgba(184,50,106,.08);
  --btn-shadow: 0 6px 16px rgba(184,50,106,.3); --btn-press: 0 2px 6px rgba(184,50,106,.3);
  --t-com: #8A6475; --t-kw: #7B3FB0; --t-str: #2E7D5B; --t-fn: #B8326A; --t-tag: #B5471B; --t-attr: #8D5B00; --t-num: #B5471B; --t-var: #3A1A2B;
  --hint-bg: #FDE6EE; --hint-fg: #3A1A2B; --hint-bc: transparent;
  --hl-bg: transparent; --hl-fg: #B8326A;
  --ok: #2E7D5B; --on-ok: #FFFFFF;
  --danger: #B42318; --on-danger: #FFFFFF;
  --warn: #8D5B00;
  --sys: #B8326A;
  --scrim: rgba(58,26,43,.4);
  --rule: transparent;
  --focus: #B8326A;
}
[data-theme="s4"][data-mode="dark"], [data-mode="dark"] [data-theme="s4"] {
  color-scheme: dark;
  --bg: #1C1218; --bar: #1C1218; --surface: #221620;
  --fg: #F6E8EE; --muted: #C2A3B1;
  --brand: #FF8FBA; --on-brand: #3A0A20;
  --accent: #FF8FBA; --on-accent: #3A0A20;
  --logo-bg: #FF8FBA; --logo-fg: #3A0A20;
  --code-bg: #221620; --cur: #33202B;
  --line-c: #3A2532;
  --frame-c: #4A2A3A;
  --shadow: 0 16px 40px rgba(0,0,0,.5);
  --shadow-sm: 0 6px 20px rgba(0,0,0,.3);
  --btn-shadow: 0 6px 16px rgba(255,143,186,.2); --btn-press: 0 2px 6px rgba(255,143,186,.2);
  --t-com: #C2A3B1; --t-kw: #D7A6FF; --t-str: #9BE3BE; --t-fn: #FF8FBA; --t-tag: #FFAB7A; --t-attr: #F2CC6B; --t-num: #FFAB7A; --t-var: #F6E8EE;
  --hint-bg: #33202B; --hint-fg: #F6E8EE;
  --hl-fg: #FF8FBA;
  --ok: #9BE3BE; --on-ok: #0B2A1C;
  --danger: #FF8A80; --on-danger: #3A0A0A;
  --warn: #F2CC6B;
  --sys: #FF8FBA;
  --scrim: rgba(0,0,0,.6);
  --focus: #FF8FBA;
}

/* مشتقات مشتركة (من غير ألوان جديدة) — على أي عنصر عليه data-theme عشان كروت المعاينة */
:root, [data-theme] {
  --line: var(--bw) solid var(--line-c);
  --frame: var(--bw) solid var(--frame-c);
  --fill: color-mix(in srgb, var(--fg) 6%, transparent);
  --fill-2: color-mix(in srgb, var(--fg) 10%, transparent);
  --brand-soft: color-mix(in srgb, var(--brand) 14%, transparent);
  --add-bg: color-mix(in srgb, var(--ok) 16%, transparent);
  --del-bg: color-mix(in srgb, var(--danger) 16%, transparent);
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur: 180ms;
}