/* ==========================================================================
   Material 3 Design Tokens — single source of truth.
   Consumed via var(--token-name) everywhere; never redeclare in other files.
   ========================================================================== */

/* @font-face در shared/css/fonts.css تعریف شده. این فایل فقط token‌ها رو داره. */

:root {
  /* ── Brand / primary ─────────────────────────────────────────────── */
  --primary:            #4A48DE;
  --primary-dark:       #332FC4;
  --on-primary:         #FFFFFF;
  --primary-container:  #E5E3FF;
  --on-primary-container:#171260;

  /* ── Semantic ────────────────────────────────────────────────────── */
  --success:            #157A50;
  --success-container:  #D8F6E7;
  --on-success:         #FFFFFF;

  --error:              #C6323D;
  --error-container:    #FCE3E4;
  --on-error:           #FFFFFF;

  --warning:            #A5690A;
  --warning-container:  #FBEACB;

  --info:               #2E5BB8;
  --info-container:     #E0E8FA;

  /* ── Surfaces ────────────────────────────────────────────────────── */
  --surface:                #FAF9FF;
  --surface-container:      #F1EFFA;
  --surface-container-high: #E8E5F5;
  --surface-container-low:  #F6F4FC;
  --surface-container-lowest:#FFFFFF;

  /* ── Outline ─────────────────────────────────────────────────────── */
  --outline:          #DEDCEE;
  --outline-variant:  #EBE9F5;

  /* ── On-surface text ─────────────────────────────────────────────── */
  --on-surface:          #1B1A22;
  --on-surface-variant:  #67647A;
  --on-surface-faint:    #9694A6;

  /* ── Radius ──────────────────────────────────────────────────────── */
  --radius-xl: 28px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --radius-pill: 9999px;

  /* ── Elevation (M3-style soft shadows) ───────────────────────────── */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(30,20,90,.06), 0 1px 6px rgba(30,20,90,.05);
  --elev-2: 0 2px 4px rgba(30,20,90,.08), 0 6px 18px rgba(30,20,90,.08);
  --elev-3: 0 4px 8px rgba(30,20,90,.10), 0 12px 28px rgba(30,20,90,.10);

  /* ── Typography ──────────────────────────────────────────────────── */
  --font-display: "Azarmehr", Tahoma, sans-serif;
  --font-body:    "Azarmehr", Tahoma, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Spacing scale (4px base) ────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── Layout ──────────────────────────────────────────────────────── */
  --sidebar-w: 272px;
  --topbar-h:  64px;
  --content-max: 1200px;

  /* ── Motion ──────────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(.3, 0, 0, 1);
  --dur-fast: .12s;
  --dur-med:  .2s;
  --dur-slow: .3s;

  /* ── Component sizes ─────────────────────────────────────────────── */
  --btn-h: 44px;
  --btn-h-sm: 36px;
  --input-h: 48px;

  /* Legacy aliases (kept so any older CSS that still references these
     keeps rendering until it's fully migrated). New code: don't use. */
  --color-primary:          var(--primary);
  --color-primary-hover:    var(--primary-dark);
  --color-primary-contrast: var(--on-primary);
  --color-primary-light:    var(--primary-container);
  --color-danger:           var(--error);
  --color-success:          var(--success);
  --color-warning:          var(--warning);
  --color-bg:               var(--surface);
  --color-bg-input:         var(--surface-container);
  --color-surface:          var(--surface-container-lowest);
  --color-border:           var(--outline);
  --color-border-focus:     var(--primary);
  --color-text:             var(--on-surface);
  --color-text-muted:       var(--on-surface-variant);
  --font-sans:              var(--font-body);
}