/* =====================================================================
   Alkafeel+ — Design tokens (single source of truth) — style v2 "official"
   Every color / weight / radius below was read from alkafeel.tv's live
   computed styles + stylesheet rules (30/10/2026). See templates/design-notes.md
   for the selector → value table. No raw colors in any other CSS file.
   Layout is full width (no centered max-width container): every page uses
   one side padding token (--gutter) from edge to edge.
   ===================================================================== */

/* Fallback for the Arabic-script letters Cairo lacks (Kurdish ڕ ڵ ێ ۆ ە …): Noto Kufi Arabic (SIL OFL,
   assets/fonts/OFL-noto-kufi-arabic.txt), subset to ONLY those glyphs. Thanks to unicode-range it is
   downloaded only on pages that actually contain such letters (Persian / Kurdish), never preloaded. */
@font-face {
  font-family: 'Kafeel Ext';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/noto-kufi-arabic-ext.woff2) format('woff2');
  unicode-range: U+0600-060B, U+060E-0614, U+0616-061A, U+061C-061E, U+0620, U+063B-063F, U+0657, U+0659-065F, U+0672-0678, U+067A-067D, U+067F-0685, U+0687, U+0689-0690, U+0692-0697, U+0699-06A0, U+06A2-06A3, U+06A5-06A8, U+06AA-06AE, U+06B0-06B9, U+06BB-06BD, U+06BF-06C0, U+06C4-06CB, U+06CD-06D1, U+06D5-06EF, U+06FA-06FF, U+200C-200D;
}

:root, .v2 {
  color-scheme: dark;

  /* ---- Brand (alkafeel.tv) ---- */
  --c-primary: #018D6B;        /* .btn border, nav active/hover, .sub-title, .btn:hover bg */
  --c-primary-ink: #1E1B29;    /* .btn:hover text on green (alkafeel.tv) — only 4.0:1, so not used for text */
  --c-on-primary: #04050A;     /* text/icons ON a green fill: 4.9:1 (alkafeel.tv overlay color .movie-poster::before) */

  /* ---- Backgrounds (alkafeel.tv) ---- */
  --c-bg: #12151E;             /* .btn bg, footer-search input, social icons — page */
  --c-bg-deep: #100E17;        /* .ucm-bg::before overlay (sections) */
  --c-header: #171D22;         /* .sticky-menu bg, .mobile-menu bg */
  --c-surface: #20212B;        /* .nav-tabs .nav-link bg (chips / cards) */
  --c-surface-2: #1B252E;      /* .submenu bg (raised panels) */
  --c-footer: #1F2229;         /* .footer-top-wrap bg */
  --c-footer-2: #171B22;       /* .copyright-wrap bg */
  --c-line: #2D303D;           /* .nav-tabs .nav-link border */
  --c-line-2: #283846;         /* .submenu border */

  /* ---- Text (alkafeel.tv) ---- */
  --c-text: #FFFFFF;           /* h2.title, h5.title (headings, card titles) */
  --c-text-nav: #F0F0F0;       /* .navbar-wrap > ul > li > a */
  --c-text-2: #E3DFDF;         /* .btn text, banner category links, tabs */
  --c-text-foot: #C3C3C3;      /* .footer-menu .navigation li a */
  --c-text-body: #BCBCBC;      /* body */
  --c-text-dim: #656870;       /* footer search placeholder */
  --c-badge-ink: #21232B;      /* 4K badge text on white */
  --c-link: #1696E7;           /* a */

  /* ---- Alpha variants (derived from the palette above) ---- */
  --c-bg-a0: rgba(18, 21, 30, 0);
  --c-bg-a40: rgba(18, 21, 30, .40);
  --c-bg-a55: rgba(18, 21, 30, .55);
  --c-bg-a85: rgba(18, 21, 30, .85);
  --c-bg-a96: rgba(18, 21, 30, .96);
  --c-bg-a75: rgba(18, 21, 30, .75);
  --c-bg-a92: rgba(18, 21, 30, .92);
  --c-header-a92: rgba(23, 29, 34, .92);
  --c-surface-a70: rgba(32, 33, 43, .70);
  --c-primary-a20: rgba(1, 141, 107, .20);
  --c-primary-a35: rgba(1, 141, 107, .35);
  --c-white-a06: rgba(255, 255, 255, .06);
  --c-white-a10: rgba(255, 255, 255, .10);
  --c-white-a16: rgba(255, 255, 255, .16);
  --c-white-a22: rgba(255, 255, 255, .22);
  --c-white-a35: rgba(255, 255, 255, .35);
  --c-black-a25: rgba(0, 0, 0, .25);
  --c-black-a50: rgba(0, 0, 0, .50);
  --c-primary-a55: rgba(1, 141, 107, .55);
  /* player overlays (derived from --c-on-primary #04050A) */
  --c-player: #04050A;
  --c-ov-a0: rgba(4, 5, 10, 0);
  --c-ov-a45: rgba(4, 5, 10, .45);
  --c-ov-a60: rgba(4, 5, 10, .60);
  --c-ov-a80: rgba(4, 5, 10, .80);
  --c-ov-a92: rgba(4, 5, 10, .92);
  --c-header-top: rgba(32, 32, 32, .71);  /* .transparent-header gradient start */
  --c-shadow: rgba(26, 36, 45, .59);      /* .submenu shadow */

  /* ---- Semantic ---- */
  --c-focus: var(--c-primary);
  --c-live: var(--c-primary);
  --c-skeleton: var(--c-surface);
  --c-shimmer: var(--c-white-a06);

  /* ---- Typography (Cairo; alkafeel.tv uses 500 body · 600 card titles · 700 headings/nav/buttons) ---- */
  --font: 'Cairo', 'Kafeel Ext', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --fw-regular: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fs-11: 11px;   /* quality badge */
  --fs-12: 12px;   /* kicker, meta, buttons (alkafeel) */
  --fs-13: 13px;   /* footer quick links */
  --fs-14: 14px;   /* body, nav */
  --fs-15: 15px;
  --fs-16: 16px;   /* card title */
  --fs-18: 18px;
  --fs-row: clamp(20px, 1.2vw + 14px, 26px);       /* section titles */
  --fs-hero: clamp(28px, 2.4vw + 16px, 48px);      /* hero title (alkafeel 32px) */
  --lh-tight: 1.2;
  --lh-title: 1.4;
  --lh-base: 1.5;   /* alkafeel body 14px/21px */
  --lh-text: 1.8;   /* long Arabic paragraphs */

  /* ---- Spacing scale (4px base) ---- */
  --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: 56px;
  --sp-10: 72px;
  --gutter: clamp(16px, 3.6vw, 64px); /* the ONE side padding of every page, header and footer */
  --gap: clamp(10px, 1.1vw, 18px);     /* card gap */
  --header-h: 64px;
  --tabbar-h: 64px;
  --sec-gap: clamp(36px, 3.4vw, 56px);

  /* ---- Radii (alkafeel.tv: card img 5px, tabs/buttons 50px pill, round icons) ---- */
  --r-xs: 4px;     /* .tr-movie-menu-active button */
  --r-card: 5px;   /* .movie-poster img */
  --r-md: 8px;
  --r-lg: 14px;    /* sheet */
  --r-pill: 50px;  /* .btn, .nav-link */
  --r-round: 50%;

  /* ---- Shadows (alkafeel.tv) ---- */
  --sh-header: 0 10px 15px rgba(25, 25, 25, .10);   /* .sticky-menu */
  --sh-inset: inset 0 4px 9px var(--c-black-a25);   /* footer search / social */
  --sh-pop: 0 30px 70px var(--c-shadow);            /* .submenu */
  --sh-card: 0 12px 28px var(--c-black-a50);

  /* ---- Z-index ---- */
  --z-base: 1;
  --z-raised: 5;
  --z-header: 50;
  --z-tabbar: 55;
  --z-sheet: 90;
  --z-toast: 100;
  --z-skip: 110;

  /* ---- Motion (subtle; transform/opacity only) ---- */
  --dur-1: 150ms;
  --dur-2: 300ms;   /* alkafeel.tv: a, .btn transition .3s ease-out */
  --dur-3: 500ms;
  --dur-4: 900ms;
  --dur-shimmer: 1400ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: ease-out;
  --stagger: 70ms;
  --rise: 24px;     /* sections rise this far while fading in on scroll */
}

@media (min-width: 1024px) {
  :root, .v2 { --header-h: 76px; }
}