/* ============================================================================
 * THEME 09 — ماتيريال يو | Material You (MD3)
 * Seed colour + container roles, filled fields, big radii. Layout: iconrail.
 * ============================================================================ */

html[data-theme="material_you"],[data-preview-theme="material_you"] {
  --ui-font: 'IBM Plex Sans Arabic', 'Tajawal', 'Cairo', sans-serif;
  --ui-heading-weight: 700;
  --ui-heading-tracking: 0;
  --ui-control-h: 48px;
  --ui-radius: 28px;
  --ui-radius-sm: 18px;
  --ui-radius-pill: 999px;
  --ui-avatar-radius: 999px;
  --ui-gap: 16px;
  --ui-card-pad: 22px;
  --ui-row-pad: 13px;
  --ui-motion: 260ms;

  --ui-canvas: #fdf7ff;
  --ui-canvas-2: #f7f2fa;
  --ui-pattern: none;
  --ui-card-bg: #f7f2fa;
  --ui-card-bg-hover: #ffffff;
  --ui-subtle: #ece6f0;
  --ui-border: #e6def0;
  --ui-border-w: 1px;
  --ui-blur: none;
  --ui-shadow: 0 1px 2px rgba(29, 27, 32, .08), 0 8px 22px -14px rgba(103, 80, 164, .45);
  --ui-shadow-hover: 0 3px 6px rgba(29, 27, 32, .1), 0 14px 30px -16px rgba(103, 80, 164, .5);
  --ui-inset: none;

  --ui-text: #1d1b20;
  --ui-heading: #141218;
  --ui-muted: #49454f;
  --ui-faint: #79747e;

  --ui-primary: #6750a4;
  --ui-primary-soft: #eaddff;
  --ui-primary-contrast: #ffffff;
  --ui-primary-glow: 0 8px 22px -12px rgba(103, 80, 164, .7);
  --ui-accent: #386a20;
  --ui-accent-soft: #ccf0bf;
  --ui-chart-1: #6750a4;
  --ui-chart-2: #386a20;
  --ui-chart-3: #7d5260;
  --ui-chart-4: #8b5000;
  --ui-chart-5: #00696e;
  --ui-grid: rgba(73, 69, 79, .14);
}

html[data-theme="material_you"][data-mode="dark"],[data-preview-theme="material_you"][data-preview-mode="dark"] {
  --ui-canvas: #141218;
  --ui-canvas-2: #1d1b20;
  --ui-card-bg: #211f26;
  --ui-card-bg-hover: #2b2930;
  --ui-subtle: #2b2930;
  --ui-border: #49454f;
  --ui-shadow: 0 8px 24px -16px rgba(0, 0, 0, .8);
  --ui-shadow-hover: 0 14px 32px -18px rgba(208, 188, 255, .35);

  --ui-text: #e6e1e5;
  --ui-heading: #f6edff;
  --ui-muted: #cac4d0;
  --ui-faint: #938f99;

  --ui-primary: #d0bcff;
  --ui-primary-soft: #4a4458;
  --ui-primary-contrast: #381e72;
  --ui-primary-glow: 0 8px 22px -12px rgba(208, 188, 255, .5);
  --ui-accent: #a6d98b;
  --ui-accent-soft: #2b4a25;
  --ui-chart-1: #d0bcff;
  --ui-chart-2: #a6d98b;
  --ui-chart-3: #efb8c8;
  --ui-chart-4: #ffb95c;
  --ui-chart-5: #7fd6dc;
  --ui-grid: rgba(202, 196, 208, .18);
}

/* MD3 filled text fields with an active bottom indicator */
html[data-theme="material_you"] input.ui-field,[data-preview-theme="material_you"] input.ui-field,
html[data-theme="material_you"] select.ui-field,
[data-preview-theme="material_you"] select.ui-field,
html[data-theme="material_you"] textarea.ui-field,
[data-preview-theme="material_you"] textarea.ui-field {
  background: var(--ui-subtle);
  border-width: 0 0 2px 0;
  border-color: var(--ui-faint);
  border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0;
  padding-inline: 16px;
}
html[data-theme="material_you"] input.ui-field:focus,[data-preview-theme="material_you"] input.ui-field:focus,
html[data-theme="material_you"] select.ui-field:focus,
[data-preview-theme="material_you"] select.ui-field:focus,
html[data-theme="material_you"] textarea.ui-field:focus,
[data-preview-theme="material_you"] textarea.ui-field:focus {
  border-bottom-color: var(--ui-primary);
  box-shadow: none;
}
/* Tonal chip group */
html[data-theme="material_you"] .ui-chip,[data-preview-theme="material_you"] .ui-chip,
html[data-theme="material_you"] .ui-tab,
[data-preview-theme="material_you"] .ui-tab {
  background: var(--ui-primary-soft);
  border-color: transparent;
  color: var(--ui-text);
}
html[data-theme="material_you"] .ui-chip.is-active,[data-preview-theme="material_you"] .ui-chip.is-active,
html[data-theme="material_you"] .ui-tab.is-active,
[data-preview-theme="material_you"] .ui-tab.is-active,
html[data-theme="material_you"] .ui-chip[aria-selected="true"],
[data-preview-theme="material_you"] .ui-chip[aria-selected="true"],
html[data-theme="material_you"] .ui-tab[aria-selected="true"],
[data-preview-theme="material_you"] .ui-tab[aria-selected="true"] {
  background: var(--ui-primary);
  color: var(--ui-primary-contrast);
}
/* Elevated FAB-style icon tiles */
html[data-theme="material_you"] .ui-icon-tile,[data-preview-theme="material_you"] .ui-icon-tile {
  border-radius: 20px;
  background: var(--ui-primary-soft);
  border-color: transparent;
  color: var(--ui-primary);
}