/*
 * Pajoohesh Pro - Fluent 2 design tokens
 *
 * This is the single visual contract for color, shape, type, elevation and
 * motion. The html[data-ui="fluent2"] gate keeps the migration reversible.
 */

html[data-ui="fluent2"] {
  color-scheme: light;

  /* Brand signature: deep petrol + mineral teal + oxidized copper. */
  --ui-brand-petrol: #0b3a40;
  --ui-brand-teal: #0e7c7b;
  --ui-brand-mineral: #42b8ad;
  --ui-brand-copper: #c8782b;
  --ui-brand-copper-subtle: #f4e8dc;
  --ui-brand-wash: #e3f0ee;
  --ui-brand-wash-strong: #cfe5e1;
  --ui-mineral-wash: #e8f5f2;
  --ui-copper-wash: #f7ebe0;
  --ui-copper-wash-strong: #efd7c0;
  --ui-petrol-wash: #dce8e8;

  /* Neutral canvas and layers */
  --ui-canvas: #edf2f1;
  --ui-layer: #fcfdfd;
  --ui-layer-alt: #f2f6f5;
  --ui-layer-hover: #eaf1f0;
  --ui-layer-pressed: #dfe9e7;
  --ui-layer-selected: #e3f1f0;
  --ui-acrylic: rgba(249, 251, 251, 0.88);

  /* Strokes */
  --ui-stroke: #cbd2d3;
  --ui-stroke-subtle: #e0e5e5;
  --ui-stroke-strong: #a9b4b5;
  --ui-stroke-control: #7f8c8e;

  /* Type */
  --ui-text: #1d2527;
  --ui-text-secondary: #586568;
  --ui-text-tertiary: #7d898b;
  --ui-text-disabled: #a2abad;
  --ui-text-on-accent: #ffffff;

  /* Brand and semantic colors */
  --ui-accent: #0e7374;
  --ui-accent-hover: #0b6264;
  --ui-accent-pressed: #094f52;
  --ui-accent-subtle: #e1f1ef;
  --ui-accent-stroke: #82bbb7;
  --ui-success: #107c10;
  --ui-success-subtle: #e7f3e7;
  --ui-warning: #9d5d00;
  --ui-warning-subtle: #fff4ce;
  --ui-danger: #c42b1c;
  --ui-danger-hover: #a4262c;
  --ui-danger-subtle: #fde7e9;
  --ui-info: #005fb8;
  --ui-info-subtle: #e5f1fb;

  /* Fluent shape scale */
  --ui-radius-compact: 2px;
  --ui-radius-control: 4px;
  --ui-radius-card: 8px;
  --ui-radius-popup: 8px;
  --ui-radius-dialog: 12px;
  --ui-radius-circular: 9999px;

  /* One elevation per level */
  --ui-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06);
  --ui-shadow-flyout: 0 8px 16px rgba(0, 0, 0, 0.14);
  --ui-shadow-dialog: 0 24px 48px rgba(0, 0, 0, 0.18);

  /* Control and spacing rhythm */
  --ui-control-sm: 28px;
  --ui-control-md: 32px;
  --ui-control-lg: 36px;
  --ui-control-xl: 40px;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;

  /* Typography: only real IRANSans weights loaded by the application */
  --ui-type-caption-size: 12px;
  --ui-type-caption-line: 18px;
  --ui-type-body-size: 14px;
  --ui-type-body-line: 22px;
  --ui-type-subtitle-size: 16px;
  --ui-type-subtitle-line: 24px;
  --ui-type-title-size: 20px;
  --ui-type-title-line: 28px;
  --ui-type-display-size: 24px;
  --ui-type-display-line: 32px;

  /* Motion and focus */
  --ui-motion-fast: 100ms;
  --ui-motion-normal: 160ms;
  --ui-ease-standard: cubic-bezier(0.33, 0, 0.67, 1);
  --ui-focus-ring: 0 0 0 2px var(--ui-layer), 0 0 0 4px var(--ui-accent);

  /* Stable z-index scale */
  --ui-z-sticky: 100;
  --ui-z-flyout: 1000;
  --ui-z-dialog: 10000;
  --ui-z-toast: 20000;
  --ui-z-fullscreen: 30000;

  /* Bridge the legacy application tokens onto the Fluent contract. */
  --color-bg: var(--ui-canvas);
  --color-surface: var(--ui-layer);
  --color-surface-2: var(--ui-layer-alt);
  --color-surface-offset: var(--ui-layer-pressed);
  --color-divider: var(--ui-stroke-subtle);
  --color-border: var(--ui-stroke);
  --color-text: var(--ui-text);
  --color-text-muted: var(--ui-text-secondary);
  --color-text-faint: var(--ui-text-tertiary);
  --color-text-inverse: var(--ui-text-on-accent);
  --color-primary: var(--ui-accent);
  --color-primary-hover: var(--ui-accent-hover);
  --color-primary-active: var(--ui-accent-pressed);
  --color-primary-highlight: var(--ui-accent-subtle);
  --color-accent: var(--ui-warning);
  --color-accent-hover: #804b00;
  --color-accent-light: var(--ui-warning-subtle);
  --radius-sm: var(--ui-radius-compact);
  --radius-md: var(--ui-radius-control);
  --radius-lg: var(--ui-radius-card);
  --radius-xl: var(--ui-radius-dialog);
  --radius-full: var(--ui-radius-circular);
  --shadow-sm: var(--ui-shadow-card);
  --shadow-md: var(--ui-shadow-flyout);
  --shadow-lg: var(--ui-shadow-dialog);
  --transition-interactive: var(--ui-motion-normal) var(--ui-ease-standard);
  --text-xs: var(--ui-type-caption-size);
  --text-sm: 13px;
  --text-base: var(--ui-type-body-size);
  --text-lg: var(--ui-type-subtitle-size);
  --text-xl: var(--ui-type-title-size);
  --text-2xl: var(--ui-type-display-size);
}

html[data-ui="fluent2"][data-theme="dark"] {
  color-scheme: dark;
  --ui-brand-petrol: #082f34;
  --ui-brand-teal: #45b8b2;
  --ui-brand-mineral: #6dd0c5;
  --ui-brand-copper: #e0a164;
  --ui-brand-copper-subtle: #493323;
  --ui-brand-wash: #163b3d;
  --ui-brand-wash-strong: #1d4a4b;
  --ui-mineral-wash: #183f3c;
  --ui-copper-wash: #402f24;
  --ui-copper-wash-strong: #503827;
  --ui-petrol-wash: #203638;
  --ui-canvas: #202020;
  --ui-layer: #2b2b2b;
  --ui-layer-alt: #323232;
  --ui-layer-hover: #383838;
  --ui-layer-pressed: #404040;
  --ui-layer-selected: #183f43;
  --ui-acrylic: rgba(43, 43, 43, 0.88);
  --ui-stroke: #4d4d4d;
  --ui-stroke-subtle: #3d3d3d;
  --ui-stroke-strong: #666666;
  --ui-stroke-control: #8a8a8a;
  --ui-text: #ffffff;
  --ui-text-secondary: #d6d6d6;
  --ui-text-tertiary: #adadad;
  --ui-text-disabled: #757575;
  --ui-accent: #5bbdc5;
  --ui-accent-hover: #70c9d0;
  --ui-accent-pressed: #3ba4ad;
  --ui-accent-subtle: #173f43;
  --ui-accent-stroke: #4e969c;
  --ui-success-subtle: #163b1b;
  --ui-warning-subtle: #433519;
  --ui-danger-subtle: #442424;
  --ui-info-subtle: #163957;
  --ui-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.36);
  --ui-shadow-flyout: 0 8px 16px rgba(0, 0, 0, 0.4);
  --ui-shadow-dialog: 0 24px 48px rgba(0, 0, 0, 0.52);
}