/* =========================================================================
   Hashd Land Application — Colors & Typography
   Official tone, inspired by Iraqi government sites.
   RTL-first.
   ========================================================================= */

/* ---------- Tajawal (Arabic) ---------- */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Tajawal-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Tajawal-500.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Tajawal-700.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/Tajawal-800.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root {
  /* ======================================================================
     COLORS — Palette
     Iraqi official palette: dark green (flag), white, black, red accent,
     plus neutrals and muted gold for ornamental seals.
     ====================================================================== */

  /* Brand */
  --brand-green-900: #0a3d2a;    /* deepest — headers, seals */
  --brand-green-800: #0f5132;    /* primary headings, nav */
  --brand-green-700: #14663f;    /* primary buttons */
  --brand-green-600: #1a7a4a;    /* hover / active */
  --brand-green-500: #2a9d5f;    /* success, positive */
  --brand-green-100: #e6f1ea;    /* surface tint */
  --brand-green-50:  #f3f8f4;    /* page tint */

  --brand-red-700:   #9b1b1b;    /* flag red — used sparingly for errors, accents */
  --brand-red-600:   #c0392b;
  --brand-red-50:    #fdecea;

  --brand-gold-600:  #a8842b;    /* ornamental — seal borders, dividers */
  --brand-gold-500:  #c9a646;
  --brand-gold-100:  #f5ecd2;

  --brand-black:     #111111;
  --brand-white:     #ffffff;

  /* Neutrals */
  --neutral-0:   #ffffff;
  --neutral-50:  #f7f7f5;
  --neutral-100: #eeeeea;
  --neutral-200: #dedcd6;
  --neutral-300: #c5c2ba;
  --neutral-400: #9a968c;
  --neutral-500: #6f6b62;
  --neutral-600: #4d4a42;
  --neutral-700: #343229;
  --neutral-800: #1f1e18;
  --neutral-900: #111110;

  /* ======================================================================
     SEMANTIC TOKENS
     ====================================================================== */

  /* Surfaces */
  --bg-page:      #f7f7f5;
  --bg-surface:   #ffffff;
  --bg-muted:     #f1f1ed;
  --bg-tint:      var(--brand-green-50);
  --bg-inverse:   var(--brand-green-900);

  /* Foregrounds */
  --fg-1: #1f1e18;          /* primary text */
  --fg-2: #4d4a42;          /* secondary */
  --fg-3: #6f6b62;          /* tertiary / captions */
  --fg-muted: #9a968c;      /* disabled / placeholder */
  --fg-inverse: #ffffff;
  --fg-brand: var(--brand-green-800);
  --fg-link: var(--brand-green-700);

  /* Borders */
  --border-1: #dedcd6;      /* default */
  --border-2: #c5c2ba;      /* stronger, form inputs */
  --border-strong: #343229; /* official form tables */
  --border-brand: var(--brand-green-700);

  /* States */
  --state-success: var(--brand-green-600);
  --state-success-bg: #e6f4ea;
  --state-error:   var(--brand-red-600);
  --state-error-bg: var(--brand-red-50);
  --state-warning: #b7791f;
  --state-warning-bg: #fff3d6;
  --state-info: #1c5599;
  --state-info-bg: #e7efff;

  /* Focus ring — visible for accessibility */
  --focus-ring: 0 0 0 3px rgba(20, 102, 63, 0.28);

  /* ======================================================================
     TYPOGRAPHY
     ====================================================================== */
  --font-sans-ar: 'Tajawal', 'Segoe UI', 'Tahoma', system-ui, sans-serif;
  --font-sans-en: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'SF Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Scale (px at root 16px) */
  --fs-display: 40px;
  --fs-h1: 32px;
  --fs-h2: 26px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-micro: 12px;

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 800;

  /* Line heights */
  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-normal: 1.7;   /* Arabic reads best with generous leading */
  --lh-loose: 1.9;

  /* ======================================================================
     SPACING (4px base)
     ====================================================================== */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;

  /* ======================================================================
     RADII — Official / formal: restrained
     ====================================================================== */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;      /* default — buttons, inputs */
  --radius-md: 6px;      /* cards */
  --radius-lg: 10px;     /* modals, hero */
  --radius-pill: 999px;  /* chips only */

  /* ======================================================================
     SHADOWS — Minimal. Gov sites use borders more than shadows.
     ====================================================================== */
  --shadow-xs: 0 1px 0 rgba(17, 17, 16, 0.04);
  --shadow-sm: 0 1px 2px rgba(17, 17, 16, 0.06), 0 1px 1px rgba(17, 17, 16, 0.04);
  --shadow-md: 0 4px 10px rgba(17, 17, 16, 0.06), 0 2px 4px rgba(17, 17, 16, 0.04);
  --shadow-lg: 0 10px 24px rgba(17, 17, 16, 0.08), 0 4px 8px rgba(17, 17, 16, 0.04);
  --shadow-inset: inset 0 0 0 1px var(--border-1);

  /* ======================================================================
     LAYOUT
     ====================================================================== */
  --container-sm: 640px;
  --container-md: 820px;
  --container-lg: 1080px;
  --container-xl: 1280px;

  --header-h: 72px;
  --topbar-h: 36px;
}

/* ==========================================================================
   ELEMENT STYLES (semantic)
   ========================================================================== */
html {
  font-size: 16px;
}
body {
  margin: 0;
  font-family: var(--font-sans-ar);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-page);
  direction: rtl;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-sans-ar);
  color: var(--fg-1);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-black); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-medium); }

.display {
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
}

p { margin: 0 0 var(--sp-4); line-height: var(--lh-normal); }
.caption { font-size: var(--fs-caption); color: var(--fg-3); }
.micro { font-size: var(--fs-micro); color: var(--fg-3); }

a { color: var(--fg-link); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 120ms ease; }
a:hover { border-bottom-color: var(--fg-link); }

small { font-size: var(--fs-caption); color: var(--fg-3); }
code, pre { font-family: var(--font-mono); font-size: 0.92em; }

hr {
  border: 0;
  border-top: 1px solid var(--border-1);
  margin: var(--sp-6) 0;
}