/* ============================================================
   Silokala Design System tokens — colors, spacing, type scale,
   shadows, motion. Font faces live ONLY in silokala-typography.css
   (IranYekan from /font/). Do not reintroduce CDN font stacks here.
   ============================================================ */

/* ---- colors.css ---- */
:root {
  --blue-900: #15315c;
  --blue-800: #1b3a6b;
  --blue-700: #224a85;
  --blue-600: #2c5ca3;
  --blue-500: #3a72c4;
  --blue-400: #5b95e0;
  --blue-200: #b9d2f3;
  --blue-100: #eef2ff;
  --blue-50:  #f5f8ff;

  --orange-700: #c97e12;
  --orange-600: #e8930f;
  --orange-500: #f5a623;
  --orange-400: #f7b84e;
  --orange-200: #fbdca5;
  --orange-100: #fdf1dc;
  --orange-50:  #fff8ec;

  --gray-900: #2d2d2d;
  --gray-700: #4f4f4f;
  --gray-600: #6b6b6b;
  --gray-500: #8c8c8c;
  --gray-400: #bdbdbd;
  --gray-300: #e0e0e0;
  --gray-200: #ebebeb;
  --gray-150: #f0f0f0;
  --gray-100: #f5f5f5;
  --white:    #ffffff;

  --success-fg: #0f6e56;
  --success-bg: #e1f5ee;
  --warning-fg: #854f0b;
  --warning-bg: #faeeda;
  --danger-fg:  #b42318;
  --danger-bg:  #fdeceb;
  --info-fg:    #1b3a6b;
  --info-bg:    #eef2ff;

  --color-primary:        var(--blue-800);
  --color-primary-hover:   var(--blue-700);
  --color-primary-active:  var(--blue-900);
  --color-accent:          var(--orange-500);
  --color-accent-hover:    var(--orange-600);
  --color-accent-active:   var(--orange-700);

  --text-strong:  var(--blue-800);
  --text-body:    var(--gray-900);
  --text-muted:   var(--gray-600);
  --text-subtle:  var(--gray-500);
  --text-on-dark: var(--white);
  --text-on-accent: var(--white);

  --surface-page:    var(--white);
  --surface-card:    var(--white);
  --surface-muted:   var(--gray-100);
  --surface-tint:    var(--blue-100);
  --surface-header:  var(--blue-800);
  --surface-footer:  var(--blue-900);

  --border-default:  var(--gray-300);
  --border-strong:   var(--gray-400);
  --border-tint:     var(--blue-200);

  --focus-ring: var(--blue-400);

  /* Brand & Navy Primitives (v6 Design Handoff) */
  --font-sans: "IranYekan", "IRANYekanX", "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
  --navy-50:  #f4f6fb;
  --navy-100: #e2e8f2;
  --navy-200: #c2cee1;
  --navy-300: #94a8c8;
  --navy-400: #6280ab;
  --navy-500: #3d6297;
  --navy-600: #2c5ca3;   /* Interactive blue */
  --navy-700: #244a82;
  --navy-800: #1b3a6b;   /* Primary identity */
  --navy-900: #14294b;
  --navy-950: #0c1a30;

  /* Action Orange Primitives */
  --orange-500: #f5821f;   /* Primary CTA */
  --orange-600: #e8760f;   /* CTA hover */
  --orange-700: #c46108;
  --orange-800: #954a08;

  /* Semantic Tokens for Cart & Checkout */
  --color-surface-canvas: var(--gray-50);
  --color-surface-1: #ffffff;
  --color-surface-2: var(--gray-50);
  --color-surface-3: var(--gray-100);

  --color-fg-default: var(--navy-800);
  --color-fg-body: #333d4d;
  --color-fg-muted: #5b687d;
  --color-fg-subtle: #7e8b9f;
  --color-fg-link: var(--navy-600);
  --color-fg-success: var(--green-700);
  --color-fg-danger: var(--red-700);

  --color-border-default: var(--gray-200);
  --color-border-subtle: var(--gray-100);
  --color-border-strong: var(--gray-300);

  --color-action-primary-bg: #f5821f;
  --color-action-primary-fg: #ffffff;
  --color-selected-bg: rgba(44, 92, 163, 0.08);
  --color-selected-border: var(--navy-600);

  /* Shadows */
  --shadow-cta: 0 6px 16px rgba(245, 130, 31, 0.25);
  --shadow-1: 0 1px 2px rgba(27, 58, 107, 0.04);
  --shadow-2: 0 2px 6px rgba(27, 58, 107, 0.06);
  --shadow-3: 0 6px 16px rgba(27, 58, 107, 0.08);
  --shadow-4: 0 12px 28px rgba(27, 58, 107, 0.12);
  --shadow-5: 0 20px 48px rgba(27, 58, 107, 0.16);
}

/* ---- spacing.css ---- */
:root {
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1320px;

  --header-height: 72px;
  --gutter: var(--space-6);
}

/* ---- typography.css (scale only — family from silokala-typography.css) ---- */
:root {
  --font-base: var(--font-primary, "IranYekan", Tahoma, Arial, sans-serif);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --text-2xs: 0.6875rem;
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-base:1rem;
  --text-md:  1.125rem;
  --text-lg:  1.375rem;
  --text-xl:  1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;
  --text-4xl: 3.75rem;

  --lh-tight: 1.3;
  --lh-snug: 1.45;
  --lh-normal: 1.7;
  --lh-relaxed: 1.9;

  --ls-none: 0em;
  --ls-tight: -0.01em;

  --type-display:  var(--fw-extrabold) var(--text-4xl)/var(--lh-tight) var(--font-base);
  --type-hero:     var(--fw-bold) var(--text-3xl)/var(--lh-tight) var(--font-base);
  --type-h1:       var(--fw-bold) var(--text-2xl)/var(--lh-tight) var(--font-base);
  --type-h2:       var(--fw-bold) var(--text-xl)/var(--lh-snug) var(--font-base);
  --type-h3:       var(--fw-semibold) var(--text-lg)/var(--lh-snug) var(--font-base);
  --type-lead:     var(--fw-regular) var(--text-md)/var(--lh-normal) var(--font-base);
  --type-body:     var(--fw-regular) var(--text-base)/var(--lh-normal) var(--font-base);
  --type-meta:     var(--fw-regular) var(--text-sm)/var(--lh-snug) var(--font-base);
  --type-caption:  var(--fw-regular) var(--text-xs)/var(--lh-snug) var(--font-base);
}

/* ---- shadows.css ---- */
:root {
  --shadow-xs:  0 1px 2px rgba(27, 58, 107, 0.06);
  --shadow-sm:  0 1px 3px rgba(27, 58, 107, 0.08), 0 1px 2px rgba(27, 58, 107, 0.04);
  --shadow-md:  0 4px 12px rgba(27, 58, 107, 0.08), 0 2px 4px rgba(27, 58, 107, 0.04);
  --shadow-lg:  0 10px 24px rgba(27, 58, 107, 0.10), 0 4px 8px rgba(27, 58, 107, 0.05);
  --shadow-xl:  0 20px 48px rgba(27, 58, 107, 0.14), 0 8px 16px rgba(27, 58, 107, 0.06);

  --shadow-search: 0 24px 60px rgba(27, 58, 107, 0.22);
  --shadow-accent: 0 8px 20px rgba(245, 166, 35, 0.30);
  --ring-focus: 0 0 0 3px rgba(91, 149, 224, 0.35);

  --elevation-card: var(--shadow-sm);
  --elevation-card-hover: var(--shadow-lg);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --transition-base: all var(--duration-base) var(--ease-standard);
}

/* ---- base.css ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
.silokala-auth-root {
  direction: rtl;
  font: var(--type-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.silokala-auth-root h1:where(:not([class])),
.silokala-auth-root h2:where(:not([class])),
.silokala-auth-root h3:where(:not([class])) {
  margin: 0;
  color: var(--text-strong);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
.silokala-auth-root p:where(:not([class])) { margin: 0; }
.silokala-auth-root a { color: var(--color-primary); text-decoration: none; }
.silokala-auth-root button { font-family: inherit; }
.silokala-auth-root img { max-width: 100%; display: block; }
.silokala-auth-root .tnum { font-feature-settings: "tnum" 1; }