/* ==========================================================================
   Secure The Humans — design tokens

   Adapted from the style reference supplied by the owner; the rules and
   the reasoning behind each value are in docs/DESIGN-SYSTEM.md. In short:
   a warm, approachable learning product. Vivid gradient hero, calm
   blue-tinted canvas, white cards floating on it, pill controls, circles as
   the signature shape, and one vivid mint action colour.

   Deviations from the reference, each for a stated reason:
   - Arabic line-heights are raised. The reference's 1.14 display leading
     makes Arabic ascenders and diacritics collide.
   - Arabic caption is 12px, not 10px — 10px Arabic is illegible.
   - The hero gradient runs right-to-left on the Arabic tree, so the deep
     indigo anchors behind the text as it does in the reference.
   - The reference's gradient hex "#3b1e9" is malformed; #3b1e90 is used.
   - The site is light-only by design, as the reference specifies.
   ========================================================================== */

:root {
  /* --- Palette (names follow the reference) ------------------------------ */
  --deep-indigo:  #3b1e90;
  --violet:       #5a3cc4;
  --sky:          #3a6ef0;
  --signal-blue:  #116eee;   /* brand identity: logo, links, nav accents */
  --spring-mint:  #11ee92;   /* the ONLY filled action colour            */
  --mint-press:   #0cd680;
  --charcoal:     #252b2f;   /* body text — never pure black for prose   */
  --pure-black:   #000000;   /* icons and illustration linework only     */
  --canvas-mist:  #f2f7fd;   /* page background                          */
  --paper-white:  #ffffff;   /* cards, nav                               */
  --steel-border: #d6dee6;
  --slate:        #666e7e;   /* captions, metadata                       */

  /* Tints derived from the palette — for icon circles and the why-care
     panel. Pastels appear inside illustration and icon containers only. */
  --blue-tint:    #e6f0fe;
  --indigo-tint:  #eeeafb;
  --mint-tint:    #dcfcef;

  --gradient-hero: linear-gradient(to left, #3b1e90 0%, #5a3cc4 30%, #3a6ef0 100%);

  /* --- Semantic aliases used by components -------------------------------- */
  --bg:       var(--canvas-mist);
  --surface:  var(--paper-white);
  --text:     var(--charcoal);
  --text-2:   #454c55;
  --text-3:   var(--slate);
  --rule:     var(--steel-border);
  --brand:    var(--signal-blue);
  --action:   var(--spring-mint);

  /* --- Type --------------------------------------------------------------- */
  --font: "STH Sans", "Segoe UI", Tahoma, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-caption:    12px;   /* reference: 10px — raised for Arabic */
  --text-body:       14px;
  --text-body-lg:    16px;
  --text-subheading: 18px;
  --text-heading-sm: 24px;
  --text-heading:    clamp(28px, 22px + 1.6vw, 36px);
  --text-display:    clamp(30px, 22px + 2.2vw, 40px);

  --lh-display: 1.35;        /* reference: 1.14 — raised for Arabic */
  --lh-heading: 1.4;
  --lh-body:    1.7;

  --w-regular: 400;
  --w-bold:    700;
  --w-extra:   800;

  /* --- Spacing (4px base, the reference's scale) -------------------------- */
  --sp-4: 4px;   --sp-8: 8px;   --sp-12: 12px; --sp-16: 16px;
  --sp-20: 20px; --sp-24: 24px; --sp-28: 28px; --sp-32: 32px;
  --sp-40: 40px; --sp-48: 48px; --sp-64: 64px; --sp-120: 120px;

  /* --- Shape -------------------------------------------------------------- */
  --radius-inputs:  5px;
  --radius-cards:   16px;
  --radius-buttons: 45px;
  --radius-circles: 9999px;

  /* The deepest elevation in the system. Never stacked. */
  --shadow-subtle: rgba(0, 0, 0, .1) 0 1px 2px 0;

  /* --- Layout ------------------------------------------------------------- */
  --page-max:    1200px;
  --section-gap: 64px;
  --card-pad:    20px;
  --text-w:      68ch;
  --nav-h:       64px;
}

/* LTR tree: indigo anchors on the left, as in the reference. */
html[dir="ltr"] { --gradient-hero: linear-gradient(to right, #3b1e90 0%, #5a3cc4 30%, #3a6ef0 100%); }