/* =====================================================================
   Yazan Core v1.5 — tokens.css (portfolio site · yazanshlash.com)
   قيم موحّدة مع Decoders. لا ألوان ولا أرقام خارج هذا الملف.
   Light = primary. Dark = ads/posts only.
   v1.5: synced to the app's built tokens (packages/design_system): field edge
   border-input, warning #965A00, body 15 / 1.6, link 14, badge 12, per-style
   line heights. The site stays square.
   v1.6: header A + hero E (web-only sizes below), and the last site colours
   (opposite accent, quote citation, WhatsApp, print) moved in here, so no
   stylesheet holds a hex value.
   ===================================================================== */

:root {
  /* ---------- Colors · light (same hex as Decoders) ---------- */
  --bg-screen:      #F7F5F0;   /* page background (cream) */
  --surface:        #FFFFFF;   /* cards, header on light, forms */
  --text-primary:   #1A1A1A;   /* text, focus ring, selected */
  --text-secondary: #6B6A65;   /* supporting text, inactive icons */
  --text-disabled:  #A8A59D;   /* disabled text only (placeholders are text-secondary) */
  --border:         #E4E2DC;   /* default 1px border, dividers */
  --border-strong:  #D9D6CE;   /* secondary button, category pill */
  --border-input:   #8C857A;   /* 1px edge of a field and a secondary button: at least 3:1 on white and on cream */
  --fill-field:     #F4F2EC;   /* inputs, icon squares */
  --fill-track:     #EEECE6;   /* progress track, disabled button */
  --fill-skeleton:  #E9E6DF;   /* skeleton blocks */
  --band-deep:      #F0EDE5;   /* the deeper cream section tone (and the featured-course rail) */

  --accent:         #B83E12;   /* rust — ONE per section */
  --accent-pressed: #8F300D;
  --accent-text:    #FFFFFF;   /* text on accent fill */

  --peach-bg:       #FBE3D6;   /* attention pill */
  --peach-text:     #7A2A0C;

  --success:        #2E7D4F;   /* icon only */
  --danger:         #B3261E;   /* icon / error border / destructive text */
  --warning:        #965A00;   /* icon only */

  --scrim:          rgba(26, 26, 26, 0.40);
  --focus-ring:     #1A1A1A;

  /* ---------- Typography · Cairo only ---------- */
  --font-sans: 'Cairo', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Decoders ladder + 2 web-only display sizes */
  --fs-display-1: 56px;  /* hero title (web only) */
  --fs-display-2: 40px;  /* section title (web only) */
  --fs-title:     24px;  /* page title */
  --fs-title-sm:  20px;  /* sub-section title */
  --fs-heading:   18px;  /* dialog / stat value */
  --fs-subhead:   16px;  /* empty-state title */
  --fs-button:    15px;  /* buttons, card titles */
  --fs-body:      15px;  /* body, rows */
  --fs-link:      14px;  /* text links */
  --fs-label:     13px;  /* field labels, helper, tabs */
  --fs-caption:   12px;  /* meta, pills, badges, nav */
  --fs-giant:     120px; /* the one giant word per page (closing); 160 from 720, 220 from 1024 */

  --fw-regular:   400;
  --fw-semibold:  600;
  --fw-bold:      700;

  --lh-display:   1.2;   /* web display (56, 40) */
  --lh-title:     1.35;  /* title 24 */
  --lh-heading:   1.4;   /* titles 20 and 18, field labels, badges */
  --lh-button:    1.3;   /* buttons, card titles */
  --lh-ui:        1.5;   /* screen heading, links, helper, captions */
  --lh-body:      1.6;   /* body, rows, reading */
  --lh-loose:     1.8;   /* a message to copy (the diagnosis template) */

  /* ---------- Spacing · 4-grid only ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---------- Radius · site is SQUARE ---------- */
  --radius:         0px;   /* buttons, pills, fields, cards, sections */
  --radius-round:   999px; /* only: student-messages slider cards + avatars */

  /* ---------- Sizes ---------- */
  --h-button:     48px;
  --h-button-sm:  40px;
  --h-field:      48px;
  --h-pill:       24px;
  --h-badge:      18px;
  --icon-sm:      14px;
  --icon:         20px;
  --icon-md:      24px;
  --icon-lg:      32px;
  --border-w:     1px;
  --border-w-strong: 2px;   /* focus, error, attention card */
  --progress-h:   6px;

  /* ---------- Web-only (v1.6: header A + hero E) ---------- */
  --sp-7:         28px;  /* primary button side padding in the hero */
  --sp-20:        80px;  /* hero column gap */
  --h-header:     80px;  /* header row */
  --size-brand-mark: 10px;   /* the square before the name */
  --size-hero-photo: 400px;  /* hero photo, desktop */
  --icon-inline:  16px;  /* arrow in a text link */
  --border-w-mark: 4px;  /* emphasis underline, side lines */
  --ls-kicker:    0.06em;  /* kicker, Latin only */
  --measure-hero-title: 640px;
  --measure-hero-lead:  520px;

  /* ---------- Web-only (v1.6: the story page) ---------- */
  --size-story-gap:     120px;  /* across the line, between text and photo (desktop) */
  --size-story-photo-w: 400px;  /* a station's photo */
  --size-story-photo-h: 300px;
  --size-story-marker:  32px;   /* the square on the line, the station number inside */
  --size-story-offset:  14px;   /* the square behind a photo, toward bottom-start */
  --measure-story-lead: 560px;
  --measure-story-body: 460px;

  /* ---------- Site colours ---------- */
  --accent-opposite: #FF6B2B;  /* the other surface's orange: an inverted block's edge */
  --quote-soft:      #B8B2A8;  /* citation on the inverted quote (the dark secondary text) */
  --whatsapp:        #25D366;  /* third-party brand green, the chat button only */
  --on-whatsapp:     #1A1A1A;
  --print-paper:     #FFFFFF;  /* @media print only: real paper and ink, whatever the theme */
  --print-ink:       #000000;
  --print-soft:      #222222;
  --print-rule:      #999999;

  /* ---------- Motion ---------- */
  --dur-fast:   150ms;
  --dur-base:   300ms;   /* progress fill, section reveal */
  --ease:       cubic-bezier(0.2, 0, 0, 1);
  --press-scale: 0.98;
}

/* the giant word steps up with the screen (v1.6) */
@media (min-width: 720px)  { :root { --fs-giant: 160px; } }
@media (min-width: 1024px) { :root { --fs-giant: 220px; } }

/* =====================================================================
   Dark · for ads/posts and dark sections (header, black section tone)
   "one orange per background": bright orange, black text on buttons
   ===================================================================== */
[data-theme="dark"],
.tone-dark {
  --bg-screen:      #1A1A1A;
  --surface:        #242320;
  --text-primary:   #F5F0E8;   /* cream */
  --text-secondary: #B8B2A8;
  --text-disabled:  #6B6A65;
  --border:         #33322E;
  --border-strong:  #4A4843;
  --border-input:   var(--border-strong);   /* the app has no dark value yet */
  --fill-field:     #2E2D29;
  --fill-track:     #33322E;
  --fill-skeleton:  #2E2D29;
  --band-deep:      var(--bg-screen);   /* no deeper band in the dark theme */

  --accent:         #FF6B2B;   /* bright orange on dark */
  --accent-pressed: #E55A1F;
  --accent-text:    #1A1A1A;   /* black text on bright button */

  --peach-bg:       #3A2418;
  --peach-text:     #FFB58F;

  --success:        #5CC98A;
  --danger:         #FF6B63;
  --warning:        #FFB84D;

  --scrim:          rgba(0, 0, 0, 0.60);
  --focus-ring:     #F5F0E8;   /* cream on dark */

  --accent-opposite: #B83E12;
  --quote-soft:      #6B6A65;   /* the light secondary text */
}

/* =====================================================================
   Section tones (from design-fix 8D) · نغمات الأقسام
   ===================================================================== */
.tone-cream        { background: var(--bg-screen); }
.tone-cream-deep   { background: var(--band-deep); }   /* deeper cream */
.tone-dark         { background: #1A1A1A; }

/* =====================================================================
   Base
   ===================================================================== */
html { font-family: var(--font-sans); }
body {
  background: var(--bg-screen);
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
code, pre, .code-box { font-family: var(--font-mono); }

:focus-visible {
  outline: var(--border-w-strong) solid var(--focus-ring);
  outline-offset: 2px;
}