/* سُرى design tokens — the single source of truth for every colour, font,
   spacing and type value in the product.

   Extracted out of style.css so the ADMIN can load the same values. Before
   this, style.css was enqueued on wp_enqueue_scripts only, so no admin
   screen loaded a single --sura-* token and the سُرى menu ended up with
   three unrelated visual languages (raw WP list tables, plain WP forms,
   jspreadsheet grids) plus hardcoded hex scattered inline in PHP.

   Loaded first on both surfaces; style.css and admin.css both depend on it.
   Changing a brand colour here changes it everywhere, which is the
   swappability the brand guideline asks for. */

:root {
  --sura-ink: #15132e;
  --sura-primary: #332c6e;
  --sura-primary-light: #a79ee0;
  --sura-paper: #f7f6fb;
  --sura-card: #ffffff;
  --sura-text: #1a1a1a;
  --sura-text-secondary: #55535c;
  --sura-text-muted: #8c8998;
  --sura-border: #e3e0ef;
  --sura-border-soft: #ece9f5;
  --sura-course-text: #085041;
  --sura-course-bg: #e1f5ee;
  --sura-btn-primary-bg: var(--sura-primary);
  --sura-btn-primary-text: #ffffff;
  --sura-shadow: 0 1px 2px rgba(21, 19, 46, 0.04), 0 12px 32px -16px rgba(21, 19, 46, 0.18);

  /* Footer surface. Deliberately its own token rather than reusing
     --sura-ink directly: in dark mode --sura-ink stays a constant #15132e,
     which is numerically identical to dark mode's --sura-paper — a literal
     --sura-ink footer would be invisible against the dark-mode page. The
     dark override below goes deeper than the page instead, so the footer
     reads as a distinct band in both themes. */
  --sura-footer-bg: var(--sura-ink);
  --sura-footer-text: #f5f3fa;
  --sura-footer-text-muted: #c9c4de;
  --sura-font-display: 'Cairo', Tahoma, sans-serif;
  --sura-font-body: 'Cairo', Tahoma, sans-serif;

  /* Semantic status colors — kept distinct from the "بيئة الأعمال" subject
     accent (--sura-course-*), which the brand guideline scopes to tags/
     course cards/progress bars only, not general correct/incorrect UI. */
  --sura-success: #1f7a4d;
  --sura-success-bg: #e6f4ec;
  --sura-danger: #a23b3b;
  --sura-danger-bg: #fdecea;
  --sura-warning: #8a6116;
  --sura-warning-bg: #fdf3d9;

  /* Text sitting ON a saturated accent fill (primary/success/danger).
     Deliberately its own token rather than reusing --sura-btn-primary-text:
     it has to flip in dark mode, because the dark accents are the LIGHT
     variants (#6fcf9b, #e28a8a, #a79ee0) and white on those is unreadable. */
  --sura-on-accent: #ffffff;
  /* Video letterboxing — stays black in both themes; it's the absence of
     picture, not a themed surface. */
  --sura-video-bg: #000000;

  /* Spacing + type scale so screens stop using one-off pixel values. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;

  /* The star-signature motif as a MASK, not a coloured image. The brand
     colour is applied separately via background-color, so it follows
     --sura-primary instead of being frozen into an encoded data URI. The
     three background-image copies this replaces each had %23332C6E baked
     in, meaning a brand-colour change needed three hand edits. */
  --sura-star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='%23000000'%3E%3Cpath transform='translate(10,4) scale(0.3)' d='M24 6L27 20L41 24L27 28L24 42L21 28L7 24L21 20Z'/%3E%3Cpath transform='translate(132,42) scale(0.16)' d='M24 6L27 20L41 24L27 28L24 42L21 28L7 24L21 20Z'/%3E%3Cpath transform='translate(56,118) scale(0.36)' d='M24 6L27 20L41 24L27 28L24 42L21 28L7 24L21 20Z'/%3E%3Cpath transform='translate(148,158) scale(0.15)' d='M24 6L27 20L41 24L27 28L24 42L21 28L7 24L21 20Z'/%3E%3Ccircle cx='110' cy='30' r='1.5'/%3E%3Ccircle cx='20' cy='110' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
  /* Brand guideline caps the motif at ~15%; 6% is the established value. */
  --sura-star-opacity: 0.06;

  /* Single 4-point sparkle mark (the logo icon), for use as a mask wherever
     the brand mark appears at small sizes — e.g. beside admin page titles.
     Same path as the inline SVGs in the candidate screens. */
  --sura-star-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23000000' d='M24 6L27 20L41 24L27 28L24 42L21 28L7 24L21 20Z'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --sura-paper: #15132e;
    --sura-card: #1e1a3d;
    --sura-text: #f5f3fa;
    --sura-text-secondary: #c9c4de;
    --sura-text-muted: #918cb0;
    --sura-border: #332c58;
    --sura-border-soft: #2a2549;
    --sura-primary: #a79ee0;
    --sura-btn-primary-bg: var(--sura-primary-light);
    --sura-btn-primary-text: #15132e;
    --sura-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 20px 40px -20px rgba(0, 0, 0, 0.6);

    --sura-success: #6fcf9b;
    --sura-success-bg: #163326;
    --sura-danger: #e28a8a;
    --sura-danger-bg: #3a2020;
    --sura-warning: #e8c777;
    --sura-warning-bg: #3a2f14;
    --sura-on-accent: #15132e;

    --sura-footer-bg: #0a0818;
    --sura-footer-text-muted: #a79ee0;
  }
}

/* Reusable star-motif surface. Applied as a masked ::before overlay so the
   colour comes from --sura-primary and stays swappable. */
.sura-star-surface {
  position: relative;
  background-color: var(--sura-paper);
}

.sura-star-surface > * {
  position: relative;
  z-index: 1;
}

.sura-star-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-color: var(--sura-primary);
  opacity: var(--sura-star-opacity);
  -webkit-mask-image: var(--sura-star-mask);
  mask-image: var(--sura-star-mask);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}