/*
 * QAA Intelligence — shared design tokens
 * =========================================
 * Phase C of the site-wide design-system audit. Before this file existed,
 * every Intelligence page (index.php, analysis/index.php, trading-floor/*
 * and their fa/ twins) hardcoded its own copy of the brand purple, gold
 * and font stack -- with no shared file at all, unlike the main
 * qasralanqaa.com site's assets/css/main.css.
 *
 * This file gives Intelligence its first real, centralized token layer,
 * using the exact canonical values decided for the whole QAA ecosystem
 * (same brand purple and gold as the main site's main.css). It is linked
 * from every public Intelligence page's <head>.
 */

:root{
  --brand-primary:#59168b;
  --brand-primary-rgb:89,22,139;
  --brand-gold:#c8a96b;
  --brand-gold-hover:#b8923a;
  --brand-primary-hover:#6b1ea3;
  --gold-soft:#c9a55a;
  --gold-soft-rgb:201,165,90;
  --brand-primary-tint:#f0ebf9;
  /* Shared shell (2026-09-28, harmonised with qasralanqaa.com's header):
     same dark header surface, container width and gutters as the main
     site, so the two read as one family. */
  --qaa-header-bg:linear-gradient(135deg,rgba(28,12,46,.97),rgba(28,12,46,.94)),#1c0c2e;
  --qaa-header-row:80px;
  --qaa-header-row-sm:80px;
  --qaa-header-h:124px;          /* brand row + 44px specialist nav row */
  --qaa-container:1180px;
  --qaa-gutter:32px;
  --qaa-section-gap:48px;        /* vertical rhythm between page sections */
  --font:'Manrope',-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* ============================================================
   * TYPOGRAPHY SCALE -- added 2026-09-23 design-system consolidation.
   * Desktop baseline exactly per spec; clamp() gives responsive scaling
   * down to mobile without a second, separate mobile-only value set.
   * Heading LEVEL (h1-h6) and heading SIZE are independent -- these are
   * visual classes/tokens, applied via utility classes (.qaa-h1 etc.)
   * or directly in a component's own rule; a component is free to keep
   * an approved deliberate exception (e.g. Advisory's editorial display
   * type) as long as it references a named token, never a bare literal.
   * ============================================================ */
  --text-display: clamp(2.375rem, 1.7rem + 3.1vw, 4rem);   /* 38px -> 64px, 1.05 */
  --text-h1:      clamp(1.75rem, 1.4rem + 1.6vw, 3rem);     /* 28px -> 48px, 1.10 */
  --text-h2:      clamp(1.375rem, 1.2rem + 0.8vw, 2rem);    /* 22px -> 32px, 1.20 */
  --text-h3:      clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem); /* 18px -> 22px, 1.30 */
  --text-h4:      clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem); /* 17px -> 18px, 1.35 */
  --text-h5: 1rem;        /* 16px, 1.40 -- small enough it doesn't need fluid scaling */
  --text-h6: 0.875rem;    /* 14px, 1.40 */
  --text-lead:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem); /* 16px -> 18px, 1.65 */
  --text-body:  1rem;     /* 16px, 1.65 */
  --text-small: 0.875rem; /* 14px, 1.55 */
  --text-micro: 0.75rem;  /* 12px, 1.40 -- metadata / eyebrow */

  --leading-display: 1.05;
  --leading-h1: 1.10;
  --leading-h2: 1.20;
  --leading-h3: 1.30;
  --leading-h4: 1.35;
  --leading-h5: 1.40;
  --leading-h6: 1.40;
  --leading-lead: 1.65;
  --leading-body: 1.65;
  --leading-small: 1.55;
  --leading-micro: 1.40;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* Letter-spacing -- Latin/EN only (see html[lang="fa"] override below,
   * which zeroes these out: tracking joined Arabic-script letterforms
   * breaks the connections between them). */
  --tracking-display: -0.02em;   /* large display/H1 headings read tighter */
  --tracking-label: 0.06em;      /* small uppercase eyebrow/metadata labels */
  --tracking-normal: 0;

  /* ============================================================
   * BORDER-RADIUS SCALE
   * ============================================================ */
  --radius-sm: 8px;   /* buttons, small controls, form inputs */
  --radius-md: 12px;  /* standard cards */
  --radius-lg: 20px;  /* major editorial containers, larger cards */
  --radius-xl: 24px;  /* hero/section containers */
  --radius-pill: 999px; /* segmented controls, filter chips, tag pills only -- not general CTAs */

  /* ============================================================
   * DIVIDER / BORDER TOKENS
   * ============================================================ */
  --border-subtle: rgba(89,22,139,.08);   /* barely-there rule, light backgrounds */
  --border-default: #f0ebf9;              /* standard editorial divider, light backgrounds (same value as --brand-primary-tint) */
  --divider-light: rgba(255,255,255,.10); /* low-emphasis divider on dark-purple backgrounds */
  --divider-dark: rgba(255,255,255,.18);  /* higher-emphasis divider on dark-purple backgrounds */

  /* ============================================================
   * BUTTON GEOMETRY
   * ============================================================ */
  --btn-height: 48px;
  --btn-height-lg: 54px;
  --btn-padding-x: 24px;
  --btn-radius: var(--radius-sm);
}
html[lang="fa"]{
  --font:'Estedad',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Persian typography: same scale, its own rhythm. No Latin letter-
   * spacing on joined Arabic-script text, and a more generous body/lead
   * line-height (Persian's diacritics/ligatures need more vertical room
   * than Latin text at the same size). */
  --tracking-display: 0;
  --tracking-label: 0;
  --leading-lead: 1.9;
  --leading-body: 1.9;
  --leading-small: 1.8;
}

/* ============================================================
 * TYPOGRAPHY UTILITY CLASSES
 * Heading LEVEL (which tag: h1-h6) and heading SIZE (which class) are
 * independent by design -- e.g. a genuine H2 that needs Display-sized
 * treatment uses <h2 class="qaa-text-display">, it does not become an
 * H1 just to "get the big size", and a footer/nav label that needs a
 * small heading-like look uses a non-heading element with one of these
 * classes rather than an H5/H6 chosen purely for its font-size.
 * ============================================================ */
.qaa-text-display{ font-size:var(--text-display); line-height:var(--leading-display); font-weight:var(--weight-black); letter-spacing:var(--tracking-display); }
.qaa-text-h1{ font-size:var(--text-h1); line-height:var(--leading-h1); font-weight:var(--weight-black); letter-spacing:var(--tracking-display); }
.qaa-text-h2{ font-size:var(--text-h2); line-height:var(--leading-h2); font-weight:var(--weight-bold); }
.qaa-text-h3{ font-size:var(--text-h3); line-height:var(--leading-h3); font-weight:var(--weight-bold); }
.qaa-text-h4{ font-size:var(--text-h4); line-height:var(--leading-h4); font-weight:var(--weight-semibold); }
.qaa-text-h5{ font-size:var(--text-h5); line-height:var(--leading-h5); font-weight:var(--weight-semibold); }
.qaa-text-h6{ font-size:var(--text-h6); line-height:var(--leading-h6); font-weight:var(--weight-semibold); }
.qaa-text-lead{ font-size:var(--text-lead); line-height:var(--leading-lead); font-weight:var(--weight-regular); }
.qaa-text-body{ font-size:var(--text-body); line-height:var(--leading-body); font-weight:var(--weight-regular); }
.qaa-text-small{ font-size:var(--text-small); line-height:var(--leading-small); font-weight:var(--weight-regular); }
.qaa-text-micro{ font-size:var(--text-micro); line-height:var(--leading-micro); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-label); text-transform:uppercase; }

/* ============================================================
 * FOOTER LABEL -- replaces H5 used purely for visual sizing.
 * Column labels like "QAA Solutions" / "QAA Intelligence" / "Company"
 * are navigation-list labels, not document subsections, so they get a
 * dedicated non-heading component instead of borrowing H5's styling.
 * Visual output is unchanged from the previous h5 rule (same size/
 * spacing/transform/weight/color) -- only the semantics change.
 * ============================================================ */
.footer-heading{
  display:block;
  font-size:var(--text-micro);
  line-height:var(--leading-micro);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  font-weight:var(--weight-bold);
  color:#fff;
  margin:0 0 14px;
}

/* ============================================================
 * SEGMENTED CONTROL -- for time-period / filter switches (Daily /
 * Weekly / Monthly / Seasonal, Trading Floor's category tabs, etc).
 * Deliberately distinct from a button/CTA: a single bordered track
 * with a sliding "filled" state inside it, not a row of individually
 * outlined pill buttons that could be mistaken for CTAs.
 * ============================================================ */
.qaa-segmented{
  display:inline-flex;
  gap:2px;
  padding:3px;
  background:var(--border-default);
  border-radius:var(--radius-pill);
}
.qaa-segmented button{
  border:0;
  background:transparent;
  color:var(--brand-primary);
  padding:6px 16px;
  border-radius:var(--radius-pill);
  cursor:pointer;
  font-size:var(--text-small);
  font-weight:var(--weight-semibold);
  transition:background .2s ease,color .2s ease;
}
.qaa-segmented button.active{
  background:var(--brand-primary);
  color:#fff;
}

/* ============================================================
 * ICON SYSTEM -- consistent sizing/stroke for the inline-SVG line-icon
 * set used across Advisory and (going forward) the rest of the site.
 * ============================================================ */
.qaa-icon{ display:inline-block; vertical-align:middle; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke); }
:root{ --icon-stroke:1.6; --icon-sm:16px; --icon-md:20px; --icon-lg:24px; }

/* ============================================================
 * BUTTON COMPONENT SYSTEM -- design-system consolidation,
 * 2026-09-23. Before this, every button/CTA on the site (Advisory
 * forms, homepage promo, Trading Floor cards, nav) was a separate
 * hand-written <style> block per page with its own padding/radius/
 * color values -- at least 15 distinct implementations, no shared
 * class existed anywhere (confirmed: zero ".qaa-btn" matches
 * pre-migration). This is the base + variant + size-modifier layer
 * every one of them now builds on.
 *
 * Base + variant classes carry color/behavior; size modifiers carry
 * the geometry (padding/height/radius/font-size) specific to each
 * migrated component's original footprint. Where two components'
 * pre-existing sizes were within ~2px of each other they were
 * consolidated onto one modifier (documented per rule below); where
 * a component referenced a value already exactly on the radius
 * scale, the modifier just uses the token directly.
 * ============================================================ */
.qaa-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; text-decoration:none; cursor:pointer; font-weight:var(--weight-bold); transition:background .2s ease,color .2s ease; box-sizing:border-box; }
.qaa-btn:disabled,.qaa-btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; }
.qaa-btn:focus-visible{ outline:2px solid var(--brand-primary); outline-offset:3px; }
.qaa-btn:active:not(:disabled){ transform:translateY(1px); }
.qaa-btn .arrow{ display:inline-block; }
@media (max-width:640px){ .qaa-btn{ min-height:44px; } }
.qaa-btn-block{ width:100%; }

/* Button system (2026-09-28, harmonised with qasralanqaa.com): the primary
   public action is the brand gold capsule with dark text, the secondary is an
   outline capsule, text actions are links with an arrow. Data controls (chart
   ranges, filters, tabs) keep their own compact purple styles elsewhere. */
.qaa-btn-primary{ background:var(--brand-gold); color:#1c0c2e; }
.qaa-btn-primary:hover{ background:var(--brand-gold-hover); color:#1c0c2e; }

.qaa-btn-outline{ background:transparent; border:1px solid rgba(var(--brand-primary-rgb),.45); color:var(--brand-primary); }
.qaa-btn-outline:hover{ background:var(--brand-primary-tint); border-color:var(--brand-primary); color:var(--brand-primary); }

.qaa-btn-gold{ background:var(--brand-gold); color:#0f172b; }
.qaa-btn-gold:hover{ background:var(--brand-gold-hover); color:#1c0c2e; }

/* -- Size/geometry modifiers, one per migrated component family -- */
.qaa-btn--promo{ height:52px; padding:0 20px; border-radius:var(--radius-pill); font-size:14px; } /* homepage Advisory promo CTA */
.qaa-btn--promo:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.qaa-btn--card-submit{ padding:16px; border-radius:var(--radius-pill); font-size:15px; } /* Advisory login/subscribe/profile form submit */
.qaa-btn--new-sub{ padding:14px; border-radius:var(--radius-pill); font-size:14px; } /* Advisory login "new subscriber" CTA */
.qaa-btn--nav{ padding:7px 18px; border-radius:var(--radius-pill); font-size:var(--text-small); } /* shared header "Visit main site" pill */
.qaa-btn--card{ padding:9px; border-radius:var(--radius-pill); font-size:var(--text-small); flex:1; text-align:center; } /* Trading Floor card-grid actions */
.qaa-btn--detail{ padding:12px 24px; border-radius:var(--radius-pill); font-size:var(--text-small); font-weight:var(--weight-semibold); } /* Trading Floor listing-detail actions */
.qaa-btn--band{ padding:10px 24px; border-radius:var(--radius-pill); } /* Trading Floor CTA band (was referencing an undefined --gold var -- see delivery report) */
.qaa-btn--outline-sm{ padding:9px 20px; border-radius:var(--radius-pill); font-weight:var(--weight-semibold); } /* "not found" page CTA + analysis "back to CARAVAN" */
.qaa-btn--tab{ padding:14px; border-radius:var(--radius-lg); } /* analysis bottom tabs */
.qaa-btn--pill-sm{ padding:13px 22px; border-radius:var(--radius-pill); font-size:14px; } /* Advisory profile post-save success CTA -- was the one primary CTA using a pill radius; kept as-is rather than forced to --radius-sm since it reads as an intentional "done" state, not a form-submit action */
.qaa-btn--report{ padding:9px 18px; border-radius:var(--radius-pill); font-weight:var(--weight-semibold); background:#fff; } /* Advisory report page actions */
.qaa-btn--check{ padding:7px 12px; border-radius:var(--radius-sm); font-size:12.5px; } /* commodity-card fair-price "Check" button */

/* phones: tighter gutters (main site: 22px), header is the brand row only */
/* <=900px: burger menu and 22px gutters, same breakpoint as qasralanqaa.com
   (2026-09-29, mobile navigation unification; was 640px) */
@media (max-width:900px){
  :root{ --qaa-gutter:22px; --qaa-header-h:80px; }
}
@media (max-width:640px){
  :root{ --qaa-section-gap:32px; }
}

/* Persian headings: no single orphan word on the last line (homepage excluded). */
html[lang="fa"]:not(:has(link[rel="canonical"][href="https://intelligence.qasralanqaa.com/fa/"])) :is(h1,h2,h3){text-wrap:balance}

/* Buttons and form fields take the site font (browsers default them to a system
   font: the analysis period tabs, Trading Floor tabs/search and the Advisory
   subscribe button rendered in Arial). A class that sets its own font still wins. */
button, input, select, textarea { font-family: inherit; }

/* Persian prose (2026-10-07; same class as the main site's main.css). Multi-line
   Persian descriptive text: a full-width block, justified, last line right.
   Headings, navigation, buttons, labels, plan names and prices never take it. */
[dir="rtl"] .fa-prose{display:block;width:100%;direction:rtl;text-align:justify;text-align-last:right;text-justify:inter-word;line-height:1.9;word-break:normal;overflow-wrap:break-word}