/* ============================================================
   Sedaye Vakil — Design Token VARIABLES (BUNDLED, single request).
   AUTO-GENERATED by tools/build-tokens.php — do not edit by hand.
   Edit the sources in ./tokens/*.css then re-run the script.
   Loaded unlayered (must contain no element/reset rules).
   ============================================================ */

/* ── tokens/colors.css ─────────────────────────────── */
/* ============================================================
   SEDAYE VAKIL — Color Tokens
   Brand: Deep crimson/wine red on dark navy — legal, premium
   ============================================================ */

:root {
  /* ── Primary palette: Crimson / Wine Red ── */
  --color-primary-50:  #FBF4F6;
  --color-primary-100: #F7EBEF;
  --color-primary-200: #EDCBD5;
  --color-primary-300: #D99EB0;
  --color-primary-400: #C0607C;
  --color-primary-500: #8B1538;   /* Brand crimson — main */
  --color-primary-600: #7A1230;
  --color-primary-700: #6B1129;
  --color-primary-800: #4A0E20;
  --color-primary-900: #3D0A19;

  /* ── Neutral palette: Navy-tinted grays ── */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #FAFAFA;
  --color-neutral-100: #F7F7F8;
  --color-neutral-200: #ECECEE;
  --color-neutral-300: #D4D4D8;
  --color-neutral-400: #A1A1AA;
  --color-neutral-500: #6B7280;
  --color-neutral-600: #4B5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1A1A2E;   /* Brand dark navy — main text */
  --color-neutral-900: #0F0F1A;

  /* ── Semantic aliases ── */
  --color-bg:              var(--color-neutral-0);
  --color-bg-subtle:       var(--color-neutral-50);
  --color-bg-muted:        var(--color-neutral-100);
  --color-text-primary:    var(--color-neutral-800);
  --color-text-secondary:  var(--color-neutral-500);
  --color-text-disabled:   var(--color-neutral-400);
  --color-text-on-brand:   #FFFFFF;
  --color-border:          var(--color-neutral-200);
  --color-border-focus:    var(--color-primary-500);

  /* ── Brand shortcuts ── */
  --color-brand:           var(--color-primary-500);
  --color-brand-dark:      var(--color-primary-800);
  --color-brand-tint:      var(--color-primary-100);
  --color-brand-gradient:  linear-gradient(135deg, #5C0F26 0%, #3D0A19 100%);
  --color-brand-gradient-radial: radial-gradient(ellipse at 30% 40%, #5C0F26 0%, #3D0A19 100%);
}

/* ── tokens/typography.css ─────────────────────────────── */
/* ============================================================
   SEDAYE VAKIL — Typography Tokens
   Font: Vazirmatn variable (100–900)
   Direction: RTL / Persian
   ============================================================ */

:root {
  /* ── Font families ── */
  --font-sans: 'Vazirmatn', system-ui, -apple-system, sans-serif;

  /* ── Font weights ── */
  --font-weight-thin:      100;
  --font-weight-light:     300;
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;
  --font-weight-black:     900;

  /* ── Type scale (fluid rem) ── */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.75rem;    /* 28px */
  --text-4xl:  2rem;       /* 32px */
  --text-5xl:  2.5rem;     /* 40px */
  --text-6xl:  3rem;       /* 48px */

  /* ── Line heights ── */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.875;   /* generous for Persian body text */
  --leading-loose:   2;

  /* ── Letter spacing ── */
  --tracking-tight:  -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* ── Semantic text styles ── */
  --text-hero:        var(--text-6xl);
  --text-title:       var(--text-4xl);
  --text-section:     var(--text-3xl);
  --text-card-title:  var(--text-xl);
  --text-body:        var(--text-base);
  --text-caption:     var(--text-sm);
  --text-kicker:      var(--text-sm);
}

/* ── tokens/spacing.css ─────────────────────────────── */
/* ============================================================
   SEDAYE VAKIL — Spacing, Radius & Layout Tokens
   ============================================================ */

:root {
  /* ── Base spacing scale ── */
  --space-0:   0;
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ── Border radii ── */
  --radius-sm:   0.5rem;    /* 8px  — small elements, tags */
  --radius-md:   0.75rem;   /* 12px — inputs, small cards */
  --radius-lg:   1rem;      /* 16px — standard cards */
  --radius-xl:   1.25rem;   /* 20px — large cards, panels */
  --radius-2xl:  1.5rem;    /* 24px — hero cards, sections */
  --radius-3xl:  2rem;      /* 32px — article band, CTA strip */
  --radius-full: 9999px;    /* pills, circles */

  /* ── Layout ── */
  --container-max:      1280px;
  --container-padding:  1.5rem;    /* 24px side padding */
  --section-padding-y:  5rem;      /* 80px vertical section padding */
  --section-padding-y-sm: 3rem;    /* 48px mobile */

  /* ── Component sizing ── */
  --icon-circle-sm:  48px;
  --icon-circle-md:  64px;
  --icon-circle-lg:  72px;
  --avatar-sm:       36px;
  --avatar-md:       48px;
  --avatar-lg:       64px;
}

/* ── tokens/shadows.css ─────────────────────────────── */
/* ============================================================
   SEDAYE VAKIL — Shadow Tokens
   Soft, layered. No harsh shadows — premium legal aesthetic.
   ============================================================ */

:root {
  /* ── Elevation shadows ── */
  --shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-sm:  0 1px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-md:  0 2px 16px 0 rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 4px 24px 0 rgba(0, 0, 0, 0.10);
  --shadow-xl:  0 8px 40px 0 rgba(0, 0, 0, 0.12);
  --shadow-2xl: 0 16px 64px 0 rgba(0, 0, 0, 0.15);

  /* ── Brand-tinted shadows (crimson glow) ── */
  --shadow-brand-sm: 0 4px 16px 0 rgba(139, 21, 56, 0.12);
  --shadow-brand:    0 8px 32px 0 rgba(139, 21, 56, 0.20);
  --shadow-brand-lg: 0 12px 48px 0 rgba(139, 21, 56, 0.25);

  /* ── Card-specific ── */
  --shadow-card:       0 2px 16px 0 rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 12px 40px 0 rgba(139, 21, 56, 0.14);

  /* ── Inner shadow (for pressed states) ── */
  --shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

/* ── tokens/fonts.css ─────────────────────────────── */
/* ============================================================
   SEDAYE VAKIL — Font Face Declarations
   Primary: Vazirmatn variable (local copy)
   Fallback: Google Fonts CDN
   ============================================================ */

/* Local variable font — full weight axis 100–900.
   WOFF2 (brotli, ~108KB) is served first; the .ttf (~235KB) is a fallback
   for legacy browsers that don't support WOFF2. */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-VariableFont_wght.woff2') format('woff2-variations'),
       url('../fonts/Vazirmatn-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  /* Persian + Arabic unicode range */
  unicode-range:
    U+0600-06FF,
    U+0750-077F,
    U+FB50-FDFF,
    U+FE70-FEFF,
    U+200C-200F,
    U+2010-2011;
}