/* يلا نتمشى — الهوية: الخطوط، الألوان، والهويات الثلاث.
   التخطيط: مشهد ثلاثي الأبعاد للطوابع في الأعلى، وتحته ألواح زجاجية تطفو فوق خلفية بزخارف نجدية.
   لتغيير الهوية الافتراضية غيّر data-id على <html> (dhay | teen | shafaq). */

@font-face { font-family: "OY Mandisa"; src: url("../fonts/oy-mandisa-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alexandria"; src: url("../fonts/alexandria-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; size-adjust: 80%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2190-2193, U+20AC, U+2122; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }

:root {
  /* الخطوط: مانديسا للعربي، ألكساندريا للاتيني والأرقام، وسيريف مائل للكلمات اللاتينية الكبيرة */
  --font: "OY Mandisa", "Alexandria", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-latin: "Instrument Serif", "Times New Roman", serif;
  --fs-xs: 0.88rem; --fs-sm: 0.98rem; --fs-md: 1.08rem; --fs-lg: 1.34rem; --fs-xl: 1.8rem; --fs-2xl: clamp(2rem, 4.2vw, 3rem);

  /* ألوان الطوابع (ثابتة في كل الهويات) */
  --c-fuchsia: #E2197C; --c-sun: #FFC928; --c-orange: #EE5B27; --c-teal: #0B6F6B; --c-blue: #2639A6; --c-violet: #6B2FA0;
  --c-clay: #B8875D; --c-clay-deep: #8A5935;

  /* الهوية ١ — ضَيّ: أبيض نهاري، حبر كحلي، أزرق الطوابع وشمسها */
  --bg: #F2F5FB; --bg2: #FFFFFF;
  --ink: #141A44; --muted: #535A80; --faint: #8A90AD;
  --primary: #2639A6; --on-primary: #FFFFFF;
  --accent: #FFC928; --on-accent: #141A44;
  --hl: #E2197C; --on-hl: #FFFFFF;
  --clay: #B8875D;
  --glass: rgba(255, 255, 255, .56); --glass-2: rgba(255, 255, 255, .8); --glass-edge: rgba(255, 255, 255, .95);
  --line: rgba(20, 26, 68, .11); --line-2: rgba(20, 26, 68, .2);
  --field: rgba(20, 26, 68, .055);
  --shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 18px 40px -18px rgba(20, 26, 68, .28), 0 2px 6px -2px rgba(20, 26, 68, .08);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 40px 80px -30px rgba(20, 26, 68, .38), 0 6px 16px -6px rgba(20, 26, 68, .12);
  --blob-1: rgba(226, 25, 124, .16); --blob-2: rgba(255, 201, 40, .26); --blob-3: rgba(38, 57, 166, .14);
  --ok: #0B6F6B; --warn: #B4610A; --bad: #C22A4A;
  --logo-main: var(--primary); --logo-sun: var(--c-sun);
  --on-p: #FFFFFF; --p1: #2639A6; --p2: #E2197C; --p3: #0B6F6B; /* ألوان الخطط الثلاث */

  --r-sm: 14px; --r-md: 22px; --r-lg: 32px; --r-pill: 999px;
  --spring: cubic-bezier(.22, 1.2, .36, 1); --ease: cubic-bezier(.3, .7, .2, 1);
  color-scheme: light;
}

/* الهوية ٢ — طين وسما: سماء فاتحة، طين الدرعية أساس، فيروزي */
:root[data-id="teen"] {
  --bg: #E4F0F7; --bg2: #F8FCFE;
  --ink: #33231A; --muted: #6F5A4B; --faint: #A08E80;
  --primary: #9A5F36; --on-primary: #FFFFFF;
  --accent: #0B6F6B; --on-accent: #FFFFFF;
  --hl: #EE5B27; --on-hl: #FFFFFF;
  --clay: #B8875D; --p1: #9A5F36; --p2: #0B6F6B; --p3: #EE5B27;
  --line: rgba(51, 35, 26, .12); --line-2: rgba(51, 35, 26, .22); --field: rgba(51, 35, 26, .06);
  --blob-1: rgba(184, 135, 93, .3); --blob-2: rgba(255, 201, 40, .22); --blob-3: rgba(11, 111, 107, .16);
  --shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 18px 40px -18px rgba(70, 45, 25, .3), 0 2px 6px -2px rgba(70, 45, 25, .1);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 40px 80px -30px rgba(70, 45, 25, .4), 0 6px 16px -6px rgba(70, 45, 25, .14);
}

/* الهوية ٣ — شفق: وردي وبنفسجي الغروب، فوشي الطوابع أساس */
:root[data-id="shafaq"] {
  --bg: #F6EAF6; --bg2: #FFF6F1;
  --ink: #2A1350; --muted: #66528A; --faint: #9C8DB8;
  --primary: #D4136F; --on-primary: #FFFFFF;
  --accent: #FFC928; --on-accent: #2A1350;
  --hl: #6B2FA0; --on-hl: #FFFFFF;
  --clay: #C08A62; --p1: #D4136F; --p2: #6B2FA0; --p3: #EE5B27;
  --line: rgba(42, 19, 80, .12); --line-2: rgba(42, 19, 80, .22); --field: rgba(42, 19, 80, .06);
  --blob-1: rgba(107, 47, 160, .2); --blob-2: rgba(238, 91, 39, .2); --blob-3: rgba(226, 25, 124, .16);
  --shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 18px 40px -18px rgba(60, 20, 90, .3), 0 2px 6px -2px rgba(60, 20, 90, .1);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 40px 80px -30px rgba(60, 20, 90, .4), 0 6px 16px -6px rgba(60, 20, 90, .14);
}

/* الوضع الليلي: ليل نجد، مو كئيب — كحلي مع وهج ألوان الطوابع */
:root[data-mode="dark"] {
  --bg: #0C1030; --bg2: #171448;
  --ink: #F4F1FF; --muted: #B4B0D8; --faint: #7F7BA8;
  --primary: #FFC928; --on-primary: #141A44;
  --accent: #FF4D9D; --on-accent: #FFFFFF;
  --hl: #FFC928; --on-hl: #141A44;
  --clay: #D9A77B;
  --glass: rgba(255, 255, 255, .07); --glass-2: rgba(30, 28, 84, .82); --glass-edge: rgba(255, 255, 255, .16);
  --line: rgba(255, 255, 255, .12); --line-2: rgba(255, 255, 255, .24); --field: rgba(255, 255, 255, .08);
  --shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 18px 40px -18px rgba(0, 0, 0, .6);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 40px 80px -30px rgba(0, 0, 0, .7);
  --blob-1: rgba(226, 25, 124, .3); --blob-2: rgba(38, 57, 166, .42); --blob-3: rgba(11, 111, 107, .34);
  --ok: #5FD6C8; --warn: #FFC56B; --bad: #FF8FA6;
  --logo-main: #FFFFFF; --on-p: #170F3A; --p1: #8EA2FF; --p2: #FF6FB1; --p3: #4FD1C5;
  color-scheme: dark;
}
:root[data-mode="dark"][data-id="teen"] { --primary: #E2A873; --on-primary: #2A1B10; --accent: #46C2B8; --on-accent: #06302E; --hl: #E2A873; --on-hl: #2A1B10; --bg: #14110F; --bg2: #2A1C14; --blob-1: rgba(184, 135, 93, .34); --blob-2: rgba(11, 111, 107, .3); --blob-3: rgba(238, 91, 39, .2); --glass-2: rgba(48, 34, 26, .86); --p1: #E2A873; --p2: #4FD1C5; --p3: #FF8A5C; }
:root[data-mode="dark"][data-id="shafaq"] { --primary: #FF4D9D; --on-primary: #FFFFFF; --accent: #FFC928; --on-accent: #2A1350; --hl: #FF4D9D; --on-hl: #FFFFFF; --bg: #150A2E; --bg2: #2A1150; --blob-1: rgba(226, 25, 124, .36); --blob-2: rgba(107, 47, 160, .44); --blob-3: rgba(238, 91, 39, .24); --glass-2: rgba(44, 22, 84, .86); --p1: #FF6FB1; --p2: #C59BFF; --p3: #FF9A6B; }