/*
 * لقطة — رموز التصميم (مولّدة من متغيرات Figma: Primitives و Color و Spacing و Radius).
 *
 * آلية الوضع (واحدة لكل الصفحات):
 * - بلا سمة على الجذر: يتبع الرموزُ تفضيلَ الجهاز (`prefers-color-scheme`).
 * - `<html data-theme="dark">` يفرض الداكن (المحرر دائماً داكن)، و`data-theme="light"` يفرض الفاتح.
 * - `.theme-dark` على عنصر يجعل منطقته داكنة مهما كانت الصفحة (شريط الرئيسية).
 * كتلة الرموز الداكنة مكتوبة مرتين، للفرض وللتفضيل، واختبار الحزمة يفشل إن اختلفتا.
 */
:root {
  /* primitives */
  --ink-950: #0c1030;
  --ink-900: #141a44;
  --ink-800: #1e2558;
  --ink-700: #2c3470;
  --ink-600: #434b87;
  --ink-500: #5a6199;
  --ink-450: #6d74a3;
  --ink-400: #8a90ba;
  --ink-350: #9ca1c6;
  --ink-300: #b3b7d4;
  --ink-200: #d5d8e8;
  --ink-100: #e8eaf3;
  --ink-50: #f4f5fa;
  --paper: #f8f9fc;
  --white: #ffffff;
  --amber-700: #855b00;
  --amber-600: #e0a200;
  --amber-500: #ffc229;
  --amber-400: #ffd361;
  --amber-200: #ffe9a8;
  --amber-100: #fff5d6;
  --red-600: #b8261f;
  --red-400: #f2605a;
  --red-500: #f0443a;
  --red-100: #fde4e2;
  --green-600: #0b7a3e;
  --green-500: #1db464;
  --green-100: #dcf4e6;
  --green-900: #0f3a27;
  --sky-600: #1f5fd1;
  --sky-500: #3d7ef5;
  --sky-300: #8db4ff;
  --sky-100: #e2ecfe;
  --sky-900: #1a2c5c;
  --teal-600: #086a6a;
  --teal-400: #3cc4c4;
  --teal-100: #d9f2f2;
  --teal-900: #0e3838;

  /* semantic (light) */
  --color-bg-canvas: var(--paper);
  --color-bg-surface: var(--white);
  --color-bg-raised: var(--white);
  --color-bg-subtle: var(--ink-50);
  --color-bg-muted: var(--ink-100);
  --color-bg-inverse: var(--ink-900);
  --color-bg-selection: var(--amber-200);
  --color-bg-selection-soft: var(--amber-100);
  --color-text-primary: var(--ink-900);
  --color-text-secondary: var(--ink-600);
  --color-text-muted: var(--ink-500);
  --color-text-inverse: var(--white);
  --color-text-on-accent: var(--ink-950);
  --color-border-default: var(--ink-200);
  --color-border-strong: var(--ink-400);
  --color-border-focus: var(--sky-500);
  --color-action-primary: var(--ink-900);
  --color-action-primary-hover: var(--ink-800);
  --color-action-on-primary: var(--white);
  --color-accent-amber: var(--amber-500);
  --color-accent-amber-strong: var(--amber-600);
  --color-status-live: var(--red-500);
  --color-status-danger: var(--red-600);
  --color-status-danger-bg: var(--red-100);
  --color-status-success: var(--green-600);
  --color-status-success-bg: var(--green-100);
  --color-rights-embedded: var(--sky-600);
  --color-rights-embedded-bg: var(--sky-100);
  --color-rights-licensed: var(--green-600);
  --color-rights-licensed-bg: var(--green-100);
  --color-rights-private: var(--teal-600);
  --color-rights-private-bg: var(--teal-100);
  --color-rights-pending: var(--amber-700);
  --color-rights-pending-bg: var(--amber-100);
  --color-control-on: var(--ink-900);
  --color-overlay-scrim: rgb(12 16 48 / 0.85);
}

:root[data-theme="dark"],
.theme-dark {
  --color-bg-canvas: var(--ink-950);
  --color-bg-surface: var(--ink-900);
  --color-bg-raised: var(--ink-800);
  --color-bg-subtle: var(--ink-800);
  --color-bg-muted: var(--ink-700);
  --color-bg-inverse: var(--ink-50);
  --color-bg-selection: var(--amber-500);
  --color-bg-selection-soft: var(--ink-700);
  --color-text-primary: var(--ink-50);
  --color-text-secondary: var(--ink-300);
  --color-text-muted: var(--ink-350);
  --color-text-inverse: var(--ink-900);
  --color-text-on-accent: var(--ink-950);
  --color-border-default: var(--ink-700);
  --color-border-strong: var(--ink-450);
  --color-border-focus: var(--sky-300);
  --color-action-primary: var(--amber-500);
  --color-action-primary-hover: var(--amber-400);
  --color-action-on-primary: var(--ink-950);
  --color-accent-amber: var(--amber-500);
  --color-accent-amber-strong: var(--amber-400);
  --color-status-live: var(--red-500);
  --color-status-danger: var(--red-400);
  --color-status-danger-bg: var(--ink-800);
  --color-status-success: var(--green-500);
  --color-status-success-bg: var(--green-900);
  --color-rights-embedded: var(--sky-300);
  --color-rights-embedded-bg: var(--sky-900);
  --color-rights-licensed: var(--green-500);
  --color-rights-licensed-bg: var(--green-900);
  --color-rights-private: var(--teal-400);
  --color-rights-private-bg: var(--teal-900);
  --color-rights-pending: var(--amber-400);
  --color-rights-pending-bg: var(--ink-700);
  --color-control-on: var(--sky-500);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-canvas: var(--ink-950);
    --color-bg-surface: var(--ink-900);
    --color-bg-raised: var(--ink-800);
    --color-bg-subtle: var(--ink-800);
    --color-bg-muted: var(--ink-700);
    --color-bg-inverse: var(--ink-50);
    --color-bg-selection: var(--amber-500);
    --color-bg-selection-soft: var(--ink-700);
    --color-text-primary: var(--ink-50);
    --color-text-secondary: var(--ink-300);
    --color-text-muted: var(--ink-350);
    --color-text-inverse: var(--ink-900);
    --color-text-on-accent: var(--ink-950);
    --color-border-default: var(--ink-700);
    --color-border-strong: var(--ink-450);
    --color-border-focus: var(--sky-300);
    --color-action-primary: var(--amber-500);
    --color-action-primary-hover: var(--amber-400);
    --color-action-on-primary: var(--ink-950);
    --color-accent-amber: var(--amber-500);
    --color-accent-amber-strong: var(--amber-400);
    --color-status-live: var(--red-500);
    --color-status-danger: var(--red-400);
    --color-status-danger-bg: var(--ink-800);
    --color-status-success: var(--green-500);
    --color-status-success-bg: var(--green-900);
    --color-rights-embedded: var(--sky-300);
    --color-rights-embedded-bg: var(--sky-900);
    --color-rights-licensed: var(--green-500);
    --color-rights-licensed-bg: var(--green-900);
    --color-rights-private: var(--teal-400);
    --color-rights-private-bg: var(--teal-900);
    --color-rights-pending: var(--amber-400);
    --color-rights-pending-bg: var(--ink-700);
    --color-control-on: var(--sky-500);
  }
}

:root {
  --space-0: 0px;
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --space-5xl: 96px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;
}