/* ============================================================================
 * THEME 10 — الهندسة العربية | Arabic Geometric Heritage
 * Arabesque pattern field, saffron/teal palette, double frames. Layout: static.
 * ============================================================================ */

html[data-theme="arabic_geometric"],[data-preview-theme="arabic_geometric"] {
  --ui-font: 'Readex Pro', 'Tajawal', 'Cairo', sans-serif;
  --ui-heading-weight: 750;
  --ui-heading-tracking: 0;
  --ui-body-size: 13.5px;
  --ui-control-h: 46px;
  --ui-radius: 6px;
  --ui-radius-sm: 5px;
  --ui-radius-pill: 999px;
  --ui-avatar-radius: 0px;
  --ui-gap: 16px;
  --ui-card-pad: 20px;
  --ui-row-pad: 12px;
  --ui-motion: 180ms;

  --ui-canvas: #07131a;
  --ui-canvas-2: #0d1b23;
  --ui-pattern: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='96'%20height='96'%20viewBox='0%200%2096%2096'%3E%3Cg%20fill='none'%20stroke='%231fb6a6'%20stroke-opacity='0.13'%3E%3Cpath%20d='M48%206l11%2022%2024%204-17%2017%205%2024-23-12-23%2012%205-24-17-17%2024-4z'/%3E%3Crect%20x='6'%20y='6'%20width='84'%20height='84'/%3E%3C/g%3E%3C/svg%3E");
  --ui-card-bg: rgba(19, 31, 39, .88);
  --ui-card-bg-hover: rgba(24, 38, 47, .95);
  --ui-subtle: rgba(31, 182, 166, .07);
  --ui-border: rgba(31, 182, 166, .3);
  --ui-border-w: 1px;
  --ui-blur: blur(6px);
  --ui-shadow: 0 14px 32px -18px rgba(0, 0, 0, .8);
  --ui-shadow-hover: 0 18px 40px -20px rgba(240, 160, 60, .35);
  --ui-inset: inset 0 1px 0 rgba(255, 255, 255, .05);

  --ui-text: #e6f2f4;
  --ui-heading: #fdf6e8;
  --ui-muted: #9fb8bd;
  --ui-faint: #6e878d;

  --ui-primary: #f0a03c;
  --ui-primary-soft: rgba(240, 160, 60, .15);
  --ui-primary-contrast: #1a0f02;
  --ui-primary-glow: 0 0 0 1px rgba(240, 160, 60, .45), 0 14px 30px -14px rgba(240, 160, 60, .6);
  --ui-accent: #1fb6a6;
  --ui-accent-soft: rgba(31, 182, 166, .15);
  --ui-chart-1: #f0a03c;
  --ui-chart-2: #1fb6a6;
  --ui-chart-3: #e07a5f;
  --ui-chart-4: #81b29a;
  --ui-chart-5: #f2cc8f;
  --ui-grid: rgba(159, 184, 189, .16);
}

html[data-theme="arabic_geometric"][data-mode="light"],[data-preview-theme="arabic_geometric"][data-preview-mode="light"] {
  --ui-canvas: #f7f4ec;
  --ui-canvas-2: #fffdf7;
  --ui-pattern: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='96'%20height='96'%20viewBox='0%200%2096%2096'%3E%3Cg%20fill='none'%20stroke='%230f8f83'%20stroke-opacity='0.16'%3E%3Cpath%20d='M48%206l11%2022%2024%204-17%2017%205%2024-23-12-23%2012%205-24-17-17%2024-4z'/%3E%3Crect%20x='6'%20y='6'%20width='84'%20height='84'/%3E%3C/g%3E%3C/svg%3E");
  --ui-card-bg: rgba(255, 253, 247, .94);
  --ui-card-bg-hover: #fffdf7;
  --ui-subtle: rgba(179, 106, 18, .07);
  --ui-border: rgba(15, 143, 131, .32);
  --ui-blur: none;
  --ui-shadow: 0 12px 28px -20px rgba(60, 48, 20, .5);
  --ui-shadow-hover: 0 16px 34px -20px rgba(179, 106, 18, .4);
  --ui-inset: none;

  --ui-text: #22303a;
  --ui-heading: #16222b;
  --ui-muted: #5d7278;
  --ui-faint: #86989d;

  --ui-primary: #b36a12;
  --ui-primary-soft: rgba(179, 106, 18, .13);
  --ui-primary-contrast: #ffffff;
  --ui-primary-glow: 0 10px 24px -12px rgba(179, 106, 18, .5);
  --ui-accent: #0f8f83;
  --ui-accent-soft: rgba(15, 143, 131, .13);
  --ui-chart-1: #b36a12;
  --ui-chart-2: #0f8f83;
  --ui-chart-3: #c1553a;
  --ui-chart-4: #5f8f77;
  --ui-chart-5: #b08a3e;
  --ui-grid: rgba(34, 48, 58, .12);
}

/* Double frame (شبيك/إطار مزدوج) around primary surfaces */
html[data-theme="arabic_geometric"] .ui-panel,[data-preview-theme="arabic_geometric"] .ui-panel,
html[data-theme="arabic_geometric"] .glass-panel,
[data-preview-theme="arabic_geometric"] .glass-panel {
  outline: 1px solid color-mix(in srgb, var(--ui-accent) 40%, transparent);
  outline-offset: 4px;
}

/* Octagonal avatars echoing the eight-point star */
html[data-theme="arabic_geometric"] .ui-avatar,[data-preview-theme="arabic_geometric"] .ui-avatar {
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  border: none;
  background: linear-gradient(135deg, var(--ui-primary-soft), var(--ui-accent-soft));
  color: var(--ui-primary);
}

html[data-theme="arabic_geometric"] .ui-rank,[data-preview-theme="arabic_geometric"] .ui-rank {
  border-radius: 4px;
  letter-spacing: 0.01em;
}

html[data-theme="arabic_geometric"] .ui-btn,[data-preview-theme="arabic_geometric"] .ui-btn,
html[data-theme="arabic_geometric"] .ui-btn-ghost,
[data-preview-theme="arabic_geometric"] .ui-btn-ghost {
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}