/* ════════════════════════════════════════════════════════════════════
   Thmanyah brand foundation — "Running Order الذكي | رياضة ثمانية"
   Real ثمانية typeface + light brand palette. Loaded FIRST, before
   ro.css and app.css. Both stylesheets consume these tokens.
   ════════════════════════════════════════════════════════════════════ */

/* ── FONTS (self-hosted, real Thmanyah typeface) ───────────────────── */
@font-face{font-family:'Thmanyah Sans';src:url('../fonts/thmanyahsans-Light.woff2')   format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Thmanyah Sans';src:url('../fonts/thmanyahsans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Thmanyah Sans';src:url('../fonts/thmanyahsans-Medium.woff2')  format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Thmanyah Sans';src:url('../fonts/thmanyahsans-Bold.woff2')    format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Thmanyah Sans';src:url('../fonts/thmanyahsans-Black.woff2')   format('woff2');font-weight:900;font-style:normal;font-display:swap}

@font-face{font-family:'Thmanyah Display';src:url('../fonts/thmanyahserifdisplay-Light.woff2')   format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Thmanyah Display';src:url('../fonts/thmanyahserifdisplay-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Thmanyah Display';src:url('../fonts/thmanyahserifdisplay-Medium.woff2')  format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Thmanyah Display';src:url('../fonts/thmanyahserifdisplay-Bold.woff2')    format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Thmanyah Display';src:url('../fonts/thmanyahserifdisplay-Black.woff2')   format('woff2');font-weight:900;font-style:normal;font-display:swap}

@font-face{font-family:'Thmanyah Serif';src:url('../fonts/thmanyahseriftext-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Thmanyah Serif';src:url('../fonts/thmanyahseriftext-Medium.woff2')  format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Thmanyah Serif';src:url('../fonts/thmanyahseriftext-Bold.woff2')    format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ── DESIGN TOKENS (Thmanyah light) ────────────────────────────────── */
:root{
  /* surfaces — DARK page + dark cards (ثمانية-style dark theme) */
  --bg:        #0E1012;   /* page background (near-black) */
  --bg1:       #1A1D21;   /* primary card / panel surface */
  --bg2:       #121519;   /* inputs / subtle inset (recessed) */
  --bg3:       #23282E;   /* hover / chips / num cells */
  --bg4:       #2C3137;   /* stronger inset / pressed */

  /* text — light on dark */
  --white:     #ECEEF0;   /* PRIMARY TEXT (name kept for compatibility) */
  --ink:       #ECEEF0;   /* alias, primary text */
  --g5:        #9AA0A6;   /* muted/secondary text */
  --g4:        #6E747B;   /* dim text / placeholders */

  /* lines */
  --border:    rgba(255,255,255,0.10);   /* hairline border on dark */
  --bd2:       rgba(255,255,255,0.17);   /* stronger border */

  /* brand — bright ثمانية green accent */
  --lime:      #2BD46A;   /* ACCENT — bright green (name kept for compatibility) */
  --green:     #2BD46A;
  --green-d:   #20B257;   /* darker green (hover/active border) */
  --lime-d:    rgba(43,212,106,0.15);   /* green tint background */
  --black:     #20242A;   /* dark-gray pill buttons (visible on the near-black page) */
  --on-black:  #ECEEF0;   /* text on dark pills */
  --gold:      #2BD46A;   /* ثمانية flower mark → green */

  /* status */
  --danger:    #F2685B;
  --danger-d:  #E0534A;
  --warn:      #E6B84A;
  --live:      #F2685B;   /* مباشر / live red (brightened for dark) */

  /* type-coding hues (segment types) — brightened to read on dark */
  --t-intro:      #5B8DEF;
  --t-intro-rec:  #4A7BE0;
  --t-tease:      #A78BFA;
  --t-discuss:    #2BD46A;
  --t-discuss-rec:#86C44A;
  --t-pkg:        #A78BFA;
  --t-field:      #F59E4B;
  --t-break:      #9099A1;
  --t-handoff:    #2BD46A;

  /* fonts */
  --font-sans:    'Thmanyah Sans', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --font-display: 'Thmanyah Display', 'Thmanyah Serif', Georgia, serif;
  --font-serif:   'Thmanyah Serif', Georgia, serif;

  /* radii */
  --r-sm: 6px;  --r: 9px;  --r-lg: 14px;  --r-pill: 999px;

  /* shadows (soft, warm) */
  --shadow-sm: 0 1px 2px rgba(20,16,8,0.04), 0 1px 3px rgba(20,16,8,0.05);
  --shadow:    0 2px 8px rgba(20,16,8,0.06), 0 10px 28px rgba(20,16,8,0.06);
  --shadow-lg: 0 12px 40px rgba(20,16,8,0.16), 0 4px 12px rgba(20,16,8,0.08);
}

/* ── BASE ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:13px}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}
::selection{background:rgba(30,158,91,0.22)}
:focus-visible{outline:2px solid var(--green);outline-offset:1px}

/* warm thin scrollbars */
*{scrollbar-width:thin;scrollbar-color:#CFC9BC transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#D5CFC1;border-radius:99px;border:2px solid var(--bg)}
*::-webkit-scrollbar-thumb:hover{background:#C3BCAB}

/* ── BRAND WORDMARK (ثمانية) ──────────────────────────────────────── */
.brand-wordmark{
  font-family:var(--font-display);
  font-weight:900;
  color:var(--ink);
  line-height:1;
  letter-spacing:0;
  display:inline-block;
}

/* ── ثمانية 8-PETAL FLOWER MARK ───────────────────────────────────── */
/* Use: <span class="flower"></span> — colour via `color`, size via font-size/width */
.flower{display:inline-block;width:1.05em;height:1.05em;color:var(--gold);vertical-align:-0.15em;flex:0 0 auto}
.flower svg{width:100%;height:100%;display:block;fill:currentColor}

/* headings default to the display serif */
h1,h2,h3,.display{font-family:var(--font-display)}