/* =====================================================================
   Dawaween Design System — Core tokens
   colors_and_type.css
   --------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Serif+Display&family=JetBrains+Mono:wght@400;500&display=swap');

/* Vazirmatn — Dawaween's primary Arabic + Latin family.
   Variable-style weight axis covered with nine static cuts. */
@font-face { font-family: "Vazirmatn"; font-weight: 100; font-style: normal; font-display: swap; src: url("../fonts/Vazirmatn-Thin.ttf") format("truetype"); }
@font-face { font-family: "Vazirmatn"; font-weight: 200; font-style: normal; font-display: swap; src: url("../fonts/Vazirmatn-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "Vazirmatn"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/Vazirmatn-Light.ttf") format("truetype"); }
@font-face { font-family: "Vazirmatn"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Vazirmatn-Regular.ttf") format("truetype"); }
@font-face { font-family: "Vazirmatn"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/Vazirmatn-Medium.ttf") format("truetype"); }
@font-face { font-family: "Vazirmatn"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/Vazirmatn-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Vazirmatn"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/Vazirmatn-Bold.ttf") format("truetype"); }
@font-face { font-family: "Vazirmatn"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/Vazirmatn-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Vazirmatn"; font-weight: 900; font-style: normal; font-display: swap; src: url("../fonts/Vazirmatn-Black.ttf") format("truetype"); }

/* ----------------------------------------------------------------------
   1. Colour — official Dawaween palette
   ---------------------------------------------------------------------- */
:root {
  /* Backgrounds */
  --white:        #FFFFFF;
  --paper:        #FFF5EE;
  --paper-soft:   #FBE9DD; /* tinted alt for banding */
  --paper-deep:   #F4D7C2; /* hover surface, illustration backing */

  /* Ink (primary) — black + cool-grey neutrals */
  --ink:          #141414;
  --ink-2:        #5C5A65;
  --ink-3:        #83828E;
  --ink-4:        #ADACBC;
  --ink-line:     rgba(20, 20, 20, .10);
  --ink-line-strong: rgba(20, 20, 20, .18);

  /* Red — primary brand colour */
  --red:          #EF3732;
  --red-300:      #FF6666;
  --red-200:      #FFA9A9;
  --red-100:      #FFC7C7;

  /* Secondary palette */
  --orange:       #ED6E34;
  --yellow:       #FAB915;
  --teal:         #2C93AD;
  --mint:         #62C5BA;

  /* Night-mode anchors */
  --night:        #141414;
  --night-soft:   #1F1F22;
  --night-line:   rgba(255, 245, 238, .14);

  /* Semantic aliases */
  --bg:           var(--paper);
  --bg-elevated:  #ffffff;
  --fg:           var(--ink);
  --fg-2:         var(--ink-2);
  --fg-3:         var(--ink-3);
  --accent:       var(--red);
  --accent-strong:#C7251F;
  --success:      var(--mint);
  --danger:       var(--red);
  --warning:      var(--yellow);
  --info:         var(--teal);
  --border:       var(--ink-line);
  --border-strong:var(--ink-line-strong);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          var(--night);
    --bg-elevated: var(--night-soft);
    --fg:          #F5EFE2;
    --fg-2:        #BCB1A0;
    --fg-3:        #847A6A;
    --border:      var(--night-line);
    --border-strong: rgba(255, 245, 230, .22);
  }
}

/* ----------------------------------------------------------------------
   2. Type
   ---------------------------------------------------------------------- */
:root {
  /* Vazirmatn is dual-script (Arabic + Latin) — used for everything. */
  --font-arabic: "Vazirmatn", "Tajawal", "Noto Naskh Arabic", system-ui, sans-serif;
  --font-latin:  "Vazirmatn", "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-serif:  "DM Serif Display", "Source Serif Pro", Georgia, serif;
  --font-mono:   "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  /* Default UI uses Vazirmatn — covers Arabic and Latin in one family */
  --font-ui:     var(--font-arabic);

  /* Type scale (px) */
  --fz-12: 12px;
  --fz-14: 14px;
  --fz-16: 16px;
  --fz-17: 17px;
  --fz-20: 20px;
  --fz-22: 22px;
  --fz-28: 28px;
  --fz-40: 40px;
  --fz-56: 56px;
  --fz-72: 72px;

  /* Roles */
  --type-display:  800 var(--fz-56)/1.05 var(--font-ui);
  --type-h1:       700 var(--fz-40)/1.1  var(--font-ui);
  --type-h2:       700 var(--fz-28)/1.2  var(--font-ui);
  --type-h3:       600 var(--fz-22)/1.25 var(--font-ui);
  --type-h4:       600 var(--fz-17)/1.3  var(--font-ui);
  --type-body:     400 var(--fz-17)/1.6  var(--font-ui);
  --type-body-sm:  400 var(--fz-14)/1.5  var(--font-ui);
  --type-caption:  500 var(--fz-12)/1.4  var(--font-ui);
  --type-eyebrow:  600 var(--fz-12)/1   var(--font-ui);
  --type-mono:     400 var(--fz-14)/1.45 var(--font-mono);
}

/* ----------------------------------------------------------------------
   3. Spacing & radii
   ---------------------------------------------------------------------- */
:root {
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10:128px;

  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  28px;
  --r-pill: 999px;
}

/* ----------------------------------------------------------------------
   4. Shadow / elevation
   ---------------------------------------------------------------------- */
:root {
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(20, 16, 8, .04), 0 4px 14px -6px rgba(72, 50, 14, .12);
  --shadow-2: 0 2px 0 rgba(20, 16, 8, .05), 0 18px 36px -12px rgba(72, 50, 14, .22);
  --shadow-focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--saffron);
}

/* ----------------------------------------------------------------------
   5. Motion
   ---------------------------------------------------------------------- */
:root {
  --ease-in:  cubic-bezier(.5, 0, .8, .25);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-inout: cubic-bezier(.55, .15, .25, 1);
  --dur-micro: 160ms;
  --dur:       220ms;
  --dur-slow:  360ms;
}

/* ----------------------------------------------------------------------
   6. Semantic element styles (use these first; fall back to roles above)
   ---------------------------------------------------------------------- */
html { font-family: var(--font-ui); color: var(--fg); background: var(--bg); }
body { margin: 0; font: var(--type-body); -webkit-font-smoothing: antialiased; }

h1 { font: var(--type-h1); margin: 0 0 var(--s-4); letter-spacing: -.01em; }
h2 { font: var(--type-h2); margin: var(--s-7) 0 var(--s-3); letter-spacing: -.005em; }
h3 { font: var(--type-h3); margin: var(--s-6) 0 var(--s-2); }
h4 { font: var(--type-h4); margin: var(--s-5) 0 var(--s-2); }
p  { font: var(--type-body); margin: 0 0 var(--s-4); text-wrap: pretty; }
small { font: var(--type-caption); color: var(--fg-2); }
code, pre { font: var(--type-mono); background: var(--paper-soft); border-radius: var(--r-sm); }
code { padding: 1px 6px; }
pre  { padding: var(--s-4); overflow-x: auto; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--saffron); text-underline-offset: 4px; text-decoration-thickness: 2px; transition: text-decoration-color var(--dur) var(--ease-out); }
a:hover { text-decoration-color: var(--saffron-700); }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-7) 0; }

/* RTL helpers */
[dir="rtl"] { font-family: var(--font-arabic); }
.rtl { direction: rtl; text-align: right; }
.ltr { direction: ltr; text-align: left; }