/* assets/css/base.css */
/* Design Language v1 – calc.tartarani.ir */
/* Scope: tokens, reset, base typography */
/* =================================
   Font Face – Yekan Bakh FaNum
   Brand font (locked)
   ================================= */

@font-face {
  font-family: 'YekanBakh';
  src:
    url('/assets/fonts/yekan-bakh/YekanBakhFaNum-Regular.woff2') format('woff2'),
    url('/assets/fonts/yekan-bakh/YekanBakhFaNum-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'YekanBakh';
  src:
    url('/assets/fonts/yekan-bakh/YekanBakhFaNum-Bold.woff2') format('woff2'),
    url('/assets/fonts/yekan-bakh/YekanBakhFaNum-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


:root {
  /* ================================
     Accent (TarTarani-inspired)
     Usage: CTA / active / key result
     ================================ */
  --accent: #E2B400;
  --accent-soft: #F6E7A6;

  /* ================================
     Background & Surfaces
     ================================ */
  --bg-main: #F7F6F2;     /* warm neutral */
  --surface-1: #FFFFFF;  /* primary card */
  --surface-2: #F1F0EB;  /* secondary */

  /* ================================
     Text colors
     ================================ */
  --text-main: #1F1F1F;   /* warm dark */
  --text-muted: #6F6F6F;
  /* ================================
     Borders & Shadows
     ================================ */
  --border: #DEDCD4;
  --border-soft: #E9E7DE;

  --shadow-1: 0 6px 16px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 10px 28px rgba(0, 0, 0, 0.10);

  /* ================================
     Focus ring (accessible, consistent)
     ================================ */
  --focus-ring: 0 0 0 3px rgba(226, 180, 0, 0.35);

  /* ================================
     Typography scale
     ================================ */
  --fs-1: 12px;
  --fs-2: 14px;
  --fs-3: 16px;
  --fs-4: 18px;
  --fs-5: 20px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* ================================
     Controls (inputs/buttons)
     ================================ */
  --control-h: 44px;         /* thumb-friendly */
  --control-pad-x: 12px;
  --control-radius: var(--radius-md);

  /* ================================
     Semantic (never decorative)
     ================================ */
  --success: #2F9E44;
  --warning: #F08C00;
  --danger:  #D64545;

  /* ================================
     Radius system
     ================================ */
  --radius-sm: 10px;
  --radius-md: 14px;

  /* ================================
     Spacing scale
     ================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}

/* =================================
   Minimal reset (sane, not aggressive)
   ================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}
html, body {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;

  background: var(--bg-main);
  color: var(--text-main);

  font-family: 'YekanBakh', system-ui, -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, Arial, sans-serif;

  font-size: var(--fs-2);
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

/* =================================
   Base elements
   ================================= */
a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

::placeholder {
  color: var(--text-muted);
  opacity: 0.85;
}

:focus {
  outline: none;
}

:focus-visible {
  box-shadow: var(--focus-ring);
  border-radius: 10px;
}

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
/* =================================
   Utility text styles
   ================================= */
.muted {
  color: var(--text-muted);
}

.err {
  color: var(--danger);
}