/* ==========================================================================
   UP AL — Design Tokens
   Source of truth for color, type, spacing, motion.
   Values derived from approved brand assets (logo + secondary asset).
   ========================================================================== */

:root {
  /* ---------- Color: surfaces ---------- */
  --color-bg: #151f28;              /* primary background — sampled from brand asset */
  --color-bg-elevated: #1b2733;     /* header/solid-surface state, one step up from bg */
  --color-bg-elevated-alpha: rgba(21, 31, 40, 0.6); /* header glass state — soft, not opaque */

  /* ---------- Color: text ---------- */
  --color-text-primary: #ffffff;
  --color-text-secondary: #b7c2cc;  /* 9.2:1 on bg — body copy */
  --color-text-muted: #8a96a1;      /* 5.5:1 on bg — tertiary / small print */

  /* ---------- Color: accent ---------- */
  --color-accent: #9ecff7;          /* sampled from brand asset (glow / line art) */
  --color-accent-soft: rgba(158, 207, 247, 0.12);

  /* ---------- Color: chrome (signature metallic accent) ----------
     Multi-band gradient, modeled on the reflective banding in the logo
     mark itself, so the CTA reads as brushed metal rather than a flat
     tint. ---------- */
  --gradient-chrome: linear-gradient(
    135deg,
    #ffffff 0%,
    #f2f2f2 12%,
    #d4d4d4 28%,
    #f7f7f7 42%,
    #bcbcbc 58%,
    #e2e2e2 74%,
    #a8a8a8 90%,
    #949494 100%
  );
  --gradient-chrome-hover: linear-gradient(
    135deg,
    #ffffff 0%,
    #ffffff 12%,
    #e6e6e6 28%,
    #ffffff 42%,
    #d2d2d2 58%,
    #f0f0f0 74%,
    #c0c0c0 90%,
    #ababab 100%
  );
  --color-on-chrome: #151f28;       /* dark text sitting on chrome fill */

  /* Chrome-to-blue — same brushed-metal banding as --gradient-chrome, but
     tuned toward the accent blue at a few stops. Reserved for hover/active
     states where a piece of chrome should feel "charged" by the accent
     light rather than plain silver — used sparingly, not as a base fill. */
  --gradient-chrome-blue: linear-gradient(
    135deg,
    #ffffff 0%,
    #eef5fb 14%,
    #cfe4f7 30%,
    #f5f9fc 44%,
    #9ecff7 60%,
    #dcedfb 76%,
    #a9c9e8 90%,
    #8fb8dc 100%
  );

  /* ---------- Color: structure ---------- */
  --color-border: rgba(255, 255, 255, 0.10);
  --color-border-soft: rgba(255, 255, 255, 0.06);
  --color-border-strong: rgba(255, 255, 255, 0.18);
  --color-focus-ring: #9ecff7;

  /* ---------- Typography ---------- */
  --font-base: "Heebo", "Segoe UI", Tahoma, Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --fs-hero: clamp(2.375rem, 1.75rem + 2.9vw, 4rem); /* ~15% down from the original scale */
  --fs-h2: clamp(2.25rem, 1.7rem + 2.6vw, 3.75rem); /* raised for stronger section-title presence */
  --fs-lead: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --fs-body: 1rem;
  --fs-small: 0.9375rem;
  --fs-nav: 0.9375rem;
  --fs-brand-subtitle: 0.6875rem;
  --fs-button: 1rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-relaxed: 1.7;

  --ls-tight: 0; /* Hebrew display type does not benefit from negative Latin-style tracking */

  /* ---------- Spacing scale ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---------- Layout ---------- */
  --header-height: 80px;
  --header-height-scrolled: 64px;
  --container-max: 1240px;
  --container-pad: clamp(20px, 5vw, 64px);

  /* ---------- Radius ---------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-button: 14px;
  --radius-lg: 20px; /* premium glass card surfaces — Process, Testimonials, Contact panel */
  --radius-full: 999px;

  /* ---------- Motion ---------- */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 560ms;

  /* ---------- Elevation ---------- */
  --shadow-button:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 1px rgba(0, 0, 0, 0.18),
    0 14px 28px -12px rgba(0, 0, 0, 0.45),
    0 3px 10px -3px rgba(0, 0, 0, 0.3);
  --shadow-button-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 1px 1px rgba(0, 0, 0, 0.2),
    0 26px 44px -14px rgba(0, 0, 0, 0.55),
    0 6px 16px -3px rgba(0, 0, 0, 0.35),
    0 0 40px -6px rgba(158, 207, 247, 0.28);
  --shadow-header-scrolled: 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 44px -26px rgba(0, 0, 0, 0.4);

  /* Glass card surfaces — one shared recipe for Process, Testimonials and
     Contact's panel, so the three "premium glass card" surfaces on the
     site read as the same material rather than three close approximations. */
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 2px 3px rgba(0, 0, 0, 0.26), 0 30px 60px -26px rgba(0, 0, 0, 0.58);
  --shadow-card-hover: inset 0 1px 0 rgba(255, 255, 255, 0.13), inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 2px 3px rgba(0, 0, 0, 0.28), 0 34px 68px -28px rgba(0, 0, 0, 0.62), 0 0 52px -14px rgba(158, 207, 247, 0.36);

  /* Media frames — Portfolio's showcase frame and Services' preview frame
     share the same resting shadow (no card-style inset highlight, since a
     real image sits inside rather than glass content). */
  --shadow-frame: 0 28px 56px -26px rgba(0, 0, 0, 0.55);

  /* Underline / accent-line glow — the small hover/focus bloom used under
     the Why UP AL row underline, the Process card accent line, and the
     Contact form underline. */
  --glow-underline: 0 0 14px -2px rgba(158, 207, 247, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}