/* ==========================================================================
   Unisolva design tokens
   --------------------------------------------------------------------------
   Plain CSS custom properties, deliberately coupled to nothing. Tailwind
   consumes these, and WHMCS's Smarty templates will consume the same file
   later. That is what keeps the marketing site and the store visually in
   sync by construction rather than by discipline. See §4.4.

   Three layers:
     1. primitive  raw brand values, never used directly by components
     2. semantic   role-based, swap between themes
     3. component  per-component, derived from semantic

   Palette source: Unisolva Brand Identity V.01 (Wondarz, 2026).
   --blue-700 is derived from the swatch, not the document, because the
   published label (#563ae7) contradicts the colour it sits on. Confirm
   with Wondarz.
   ========================================================================== */

:root {
  /* -- 1. primitives ------------------------------------------------------ */

  --white:        #FFFFFF;
  --grey-100:     #EFEFEF;
  --grey-200:     #D3D3D3;

  --blue-400:     #00A6EF;   /* bright  */
  --blue-500:     #008BD8;   /* mid     */
  --blue-600:     #007ACC;   /* brand   */
  --blue-700:     #006CA0;   /* derived */
  --blue-800:     #005F75;   /* deep    */
  --blue-900:     #004456;   /* deepest */

  --ink-900:      #161616;
  --ink-800:      #1E1E1E;
  --ink-600:      #3D3D3D;

  /* neutrals biased slightly cool, to sit with the blues rather than fight them */
  --neutral-500:  #6E6E6E;
  --neutral-400:  #8A8A8A;
  --neutral-300:  #A8A8A8;

  /* semantic states are separate from the accent, on purpose */
  --state-success: #1B8F5A;
  --state-warning: #B4761A;
  --state-danger:  #C2401F;

  /* -- 2. semantic (light theme is the default) --------------------------- */

  --surface:          var(--white);
  --surface-raised:   var(--grey-100);
  --surface-sunken:   var(--grey-100);
  --surface-inverse:  var(--ink-900);

  --border:           var(--grey-200);
  --border-strong:    var(--neutral-300);

  --text:             var(--ink-900);
  --text-muted:       var(--ink-600);
  --text-subtle:      var(--neutral-500);
  --text-inverse:     var(--white);
  --text-on-accent:   var(--white);

  --accent:           var(--blue-600);
  --accent-hover:     var(--blue-700);
  --accent-muted:     var(--blue-400);
  --accent-contrast:  var(--blue-900);

  --focus-ring:       var(--blue-400);

  /* -- 3. typography ------------------------------------------------------ */

  --font-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-arabic:  'Cairo', system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-2xs:  0.6875rem;  /* 11px   labels, eyebrows        */
  --text-xs:   0.78125rem; /* 12.5px captions, meta          */
  --text-sm:   0.875rem;   /* 14px   secondary               */
  --text-base: 1rem;       /* 16px   body                    */
  --text-lg:   1.125rem;   /* 18px   lede                    */
  --text-xl:   1.3125rem;  /* 21px                           */
  --text-2xl:  1.5rem;     /* 24px                           */
  --text-3xl:  1.875rem;   /* 30px                           */
  --text-4xl:  2.375rem;   /* 38px                           */
  --text-5xl:  3rem;       /* 48px                           */
  --text-6xl:  3.75rem;    /* 60px   hero only               */

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* Arabic needs more leading than Latin at equivalent size */
  --leading-arabic:  1.9;

  --tracking-tight: -0.022em;
  --tracking-snug:  -0.012em;
  --tracking-wide:   0.06em;
  --tracking-label:  0.14em;

  --weight-light:    300;
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* -- 4. space, radius, elevation ---------------------------------------- */

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(22 22 22 / 0.06);
  --shadow-md: 0 2px 8px rgb(22 22 22 / 0.08);
  --shadow-lg: 0 8px 28px rgb(22 22 22 / 0.10);

  /* -- 5. component tokens ------------------------------------------------ */

  /* The brand book fills the featured plan with literal #161616. That reads
     beautifully on a white page and vanishes entirely on a dark one, where
     the page background is also #161616. Component tokens let the card lift
     on dark grounds without the component knowing which theme it is in. */
  --plan-bg:              var(--blue-600);
  --plan-featured-bg:     var(--ink-900);
  --plan-featured-border: var(--ink-600);
  --plan-featured-shadow: none;

  --container: 1180px;
  --container-narrow: 760px;

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease: cubic-bezier(0.2, 0, 0.15, 1);
}

/* ==========================================================================
   Dark theme
   --------------------------------------------------------------------------
   Only the semantic layer is redefined. Components never reference
   primitives or sit inside a media query, so both themes stay in step.

   The accent shifts from --blue-600 to --blue-400 on dark grounds: #007ACC
   does not carry enough contrast against #161616 for text, though it stays
   fine as a fill.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --surface:          var(--ink-900);
    --surface-raised:   var(--ink-800);
    --surface-sunken:   #0E0E0E;
    --surface-inverse:  var(--white);

    --border:           var(--ink-600);
    --border-strong:    var(--neutral-500);

    --text:             var(--grey-100);
    --text-muted:       var(--grey-200);
    --text-subtle:      var(--neutral-400);
    --text-inverse:     var(--ink-900);
    --text-on-accent:   var(--white);

    --accent:           var(--blue-400);
    --accent-hover:     var(--blue-500);
    --accent-muted:     var(--blue-600);
    --accent-contrast:  var(--white);

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.40);
    --shadow-md: 0 2px 8px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 8px 28px rgb(0 0 0 / 0.55);

    --plan-featured-bg:     var(--ink-800);
    --plan-featured-border: var(--blue-400);
    --plan-featured-shadow: 0 0 0 1px rgb(0 166 239 / 0.25), 0 10px 30px rgb(0 0 0 / 0.5);
  }
}

/* Explicit override wins over the media query, in both directions. */
:root[data-theme='dark'] {
  --surface:          var(--ink-900);
  --surface-raised:   var(--ink-800);
  --surface-sunken:   #0E0E0E;
  --surface-inverse:  var(--white);
  --border:           var(--ink-600);
  --border-strong:    var(--neutral-500);
  --text:             var(--grey-100);
  --text-muted:       var(--grey-200);
  --text-subtle:      var(--neutral-400);
  --text-inverse:     var(--ink-900);
  --accent:           var(--blue-400);
  --accent-hover:     var(--blue-500);
  --accent-muted:     var(--blue-600);
  --accent-contrast:  var(--white);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.40);
  --shadow-md: 0 2px 8px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 8px 28px rgb(0 0 0 / 0.55);
  --plan-featured-bg:     var(--ink-800);
  --plan-featured-border: var(--blue-400);
  --plan-featured-shadow: 0 0 0 1px rgb(0 166 239 / 0.25), 0 10px 30px rgb(0 0 0 / 0.5);
}

:root[data-theme='light'] {
  --surface:          var(--white);
  --surface-raised:   var(--grey-100);
  --surface-sunken:   var(--grey-100);
  --surface-inverse:  var(--ink-900);
  --border:           var(--grey-200);
  --border-strong:    var(--neutral-300);
  --text:             var(--ink-900);
  --text-muted:       var(--ink-600);
  --text-subtle:      var(--neutral-500);
  --text-inverse:     var(--white);
  --accent:           var(--blue-600);
  --accent-hover:     var(--blue-700);
  --accent-muted:     var(--blue-400);
  --accent-contrast:  var(--blue-900);
  --shadow-sm: 0 1px 2px rgb(22 22 22 / 0.06);
  --shadow-md: 0 2px 8px rgb(22 22 22 / 0.08);
  --shadow-lg: 0 8px 28px rgb(22 22 22 / 0.10);
  --plan-featured-bg:     var(--ink-900);
  --plan-featured-border: var(--ink-600);
  --plan-featured-shadow: none;
}

/* Arabic swaps the body face wholesale and loosens leading. */
:root:lang(ar),
[dir='rtl'] {
  --font-display: var(--font-arabic);
  --font-body: var(--font-arabic);
  --leading-normal: var(--leading-arabic);
}