/* ==========================================================================
   O SOLUTIONS TECHNOLOGIES — DESIGN TOKENS
   Palette extracted from brand reference + brief-specified hex values.
   ========================================================================== */

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk_wght_.ttf") format("truetype-variations"),
       url("../fonts/SpaceGrotesk_wght_.ttf") format("truetype");
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "VT323";
  src: url("../fonts/VT323-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

/* ===================== ARABIC FONTS (toggled via [data-lang="ar"]) ===================== */
/* Tahoma — normal Arabic UI text. */
@font-face {
  font-family: "Tahoma Arabic";
  src: url("../fonts/Tahoma-8px-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
/* Forma DJR Arabic Banner — large headings / branding text. */
@font-face {
  font-family: "Forma DJR Arabic";
  src: url("../fonts/FormaDJRArabicBanner-Regular-Testing.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
/* Milligram Arabic Medium — big labels. */
@font-face {
  font-family: "Milligram Arabic";
  src: url("../fonts/Milligram-Arabic-Medium-TRIAL.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

:root{
  /* ---- Brand colors (brief-specified) ---- */
  --orange:        #EC6C25;
  --orange-rgb:     236,108,37;
  --blue:           #293B7F;
  --blue-rgb:       41,59,127;
  --gray:           #676767;
  --beige:          #F4D988;

  /* ---- Decal / accent colors (sampled from brand reference art) ---- */
  --magenta:        #D1059B;
  --pulsar-pink:    #CD366B;
  --rust:           #BC5C37;
  --tan:            #CDAE66;
  --charcoal-soft:  #444242;
  --red:           #f40505d8;
  /* ---- Orbit ramp: orange -> blue, used for signature gradients ---- */
  --orbit-gradient: linear-gradient(135deg, var(--orange) 0%, var(--rust) 28%, var(--blue) 100%);
  --orbit-gradient-soft: linear-gradient(135deg, rgba(var(--orange-rgb),.18) 0%, rgba(var(--blue-rgb),.18) 100%);

  /* ---- Type ---- */
  --font-display: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "VT323", ui-monospace, "Courier New", monospace;

  --fs-2xl: clamp(2.6rem, 6vw, 5.6rem);
  --fs-xl:  clamp(2rem, 4.2vw, 3.4rem);
  --fs-lg:  clamp(1.5rem, 2.6vw, 2.1rem);
  --fs-md:  clamp(1.125rem, 1.4vw, 1.35rem);
  --fs-body: clamp(1.05rem, 1.1vw, 1.2rem);
  --fs-sm:  0.92rem;
  --fs-xs:  0.78rem;

  /* ---- Spacing scale ---- */
  --sp-1: 0.4rem;
  --sp-2: 0.8rem;
  --sp-3: 1.6rem;
  --sp-4: 2.4rem;
  --sp-5: 4rem;
  --sp-6: 6.4rem;
  --sp-7: 9.6rem;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 26px;
  --container: 1280px;

  --ease-orbit: cubic-bezier(.16,.84,.32,1);
  --dur-fast: .22s;
  --dur-med: .5s;
  --dur-slow: 1s;

  color-scheme: dark;
}

/* ===================== DARK THEME (default) ===================== */
:root,
[data-theme="dark"]{
  --bg-0:        #0a0a10;
  --bg-1:        #11121b;
  --bg-2:        #181a26;
  --bg-elevated: #1d2030;
  --line:        rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.18);

  --text-0:      #f4f4f7;
  --text-1:      #c7c8d3;
  --text-2:      #8b8d9c;

  --accent:        var(--orange);
  --accent-rgb:     var(--orange-rgb);
  --accent-2:       var(--beige);
  --link:           #ff9156;
  
  --nav-bg: rgba(10,10,16,.72);
  --card-bg: rgba(255,255,255,.035);
  --card-border: rgba(255,255,255,.1);
  --glow: 0 0 60px rgba(var(--orange-rgb), .25);
}

/* ===================== LIGHT THEME ===================== */
[data-theme="light"]{
  color-scheme: light;
  --bg-0:        #f7f5f0;
  --bg-1:        #ffffff;
  --bg-2:        #efeee8;
  --bg-elevated: #ffffff;
  --line:        rgba(20,20,30,.1);
  --line-strong: rgba(20,20,30,.22);

  --text-0:      #15151c;
  --text-1:      #3a3b46;
  --text-2:      #676767;

  --accent:      var(--orange);
  --accent-rgb:   var(--orange-rgb);
  --accent-2:    var(--blue);
  --link:        #c2541a;

  --nav-bg: rgba(247,245,240,.78);
  --card-bg: rgba(20,20,30,.03);
  --card-border: rgba(20,20,30,.1);
  --glow: 0 0 50px rgba(var(--orange-rgb), .14);
}

/* ===================== ARABIC TYPOGRAPHY (active when lang/dir = ar) =====================
   Font roles requested for Arabic:
     • Tahoma        → normal Arabic UI / body text
     • Forma DJR     → large headings / branding text
     • Milligram     → big labels
   The toggle sets [data-lang="ar"] on <html>.

   IMPORTANT (bug fix): Arabic fonts are applied ONLY to elements that are
   actually translated — those carrying data-i18n / data-i18n-html /
   data-i18n-placeholder. Everything without those attributes (technical info,
   specs, datasheets, nav labels, license, Pin Planner, etc.) keeps its
   original English font even while Arabic is selected, so the English text
   never changes appearance. Arabic line-height is also raised (1.9 body /
   1.5 headings) so multi-line Arabic no longer overlaps vertically. */
/* Arabic body / paragraph text — translated elements only */
[data-lang="ar"] [data-i18n]:not(:is(h1,h2,h3,h4)),
[data-lang="ar"] [data-i18n-html]:not(:is(h1,h2,h3,h4)),
[data-lang="ar"] [data-i18n-placeholder]{
  font-family: "Tahoma Arabic", "Segoe UI", Tahoma, sans-serif;
  line-height: 1.9;
}

/* Arabic large headings / branding text — translated headings only */
[data-lang="ar"] [data-i18n]:is(h1,h2,h3,h4),
[data-lang="ar"] [data-i18n-html]:is(h1,h2,h3,h4),
[data-lang="ar"] [data-i18n].heading-xl,
[data-lang="ar"] [data-i18n].heading-lg,
[data-lang="ar"] [data-i18n].heading-md,
[data-lang="ar"] [data-i18n].hero__title,
[data-lang="ar"] [data-i18n].page-header__title,
[data-lang="ar"] [data-i18n].feature-card__title,
[data-lang="ar"] [data-i18n].product-card__title,
[data-lang="ar"] [data-i18n].timeline__title,
[data-lang="ar"] [data-i18n].cta-band__title,
[data-lang="ar"] [data-i18n].release-item__version,
[data-lang="ar"] [data-i18n].app-download-card__title,
[data-lang="ar"] [data-i18n-html].heading-xl,
[data-lang="ar"] [data-i18n-html].heading-lg,
[data-lang="ar"] [data-i18n-html].heading-md,
[data-lang="ar"] [data-i18n-html].hero__title,
[data-lang="ar"] [data-i18n-html].page-header__title,
[data-lang="ar"] [data-i18n-html].feature-card__title,
[data-lang="ar"] [data-i18n-html].product-card__title,
[data-lang="ar"] [data-i18n-html].timeline__title,
[data-lang="ar"] [data-i18n-html].cta-band__title,
[data-lang="ar"] [data-i18n-html].release-item__version,
[data-lang="ar"] [data-i18n-html].app-download-card__title{
  font-family: "Forma DJR Arabic", "Segoe UI", Tahoma, sans-serif;
  line-height: 1.5;
  letter-spacing: 0;
}

/* Arabic labels / eyebrow text — translated labels only */
[data-lang="ar"] [data-i18n].eyebrow,
[data-lang="ar"] [data-i18n].tag,
[data-lang="ar"] [data-i18n] label,
[data-lang="ar"] [data-i18n-html].eyebrow,
[data-lang="ar"] [data-i18n-html].tag,
[data-lang="ar"] [data-i18n-html] label,
[data-lang="ar"] [data-i18n].footer__heading,
[data-lang="ar"] [data-i18n-html].footer__heading,
[data-lang="ar"] [data-i18n].page-header__kicker,
[data-lang="ar"] [data-i18n-html].page-header__kicker,
[data-lang="ar"] [data-i18n].store-hero__badge,
[data-lang="ar"] [data-i18n-html].store-hero__badge,
[data-lang="ar"] [data-i18n].timeline__year,
[data-lang="ar"] [data-i18n-html].timeline__year,
[data-lang="ar"] [data-i18n].app-spec__key,
[data-lang="ar"] [data-i18n-html].app-spec__key{
  font-family: "Milligram Arabic", "Segoe UI", Tahoma, sans-serif;
  line-height: 1.6;
}