/* ================================================================
   HELSAN — DESIGN TOKENS (single source of truth)
   ----------------------------------------------------------------
   This is the ONLY place global design tokens are declared.
   Every other stylesheet (custom-style.css, animations.css,
   dark-mode.css, page layers) must consume `--hs-*` variables and
   must never redeclare global tokens or restyle shared components.

   Load order (templates/components/header_css.html):
     1. custom.css        (page-agnostic tweaks)
     2. helsan-tokens.css (this file)
     3. custom-style.css  (HELSAN component layers)
     4. animations.css    (motion utilities)
     5. dark-mode.css     (dark palette, rebased on --hs-*)
     6. page `{% block css %}` files (page layout only)
   ================================================================ */

:root {

    /* ----- Brand palette — green / orange ----- */
    --hs-green-950: #10261a;
    --hs-green-900: #163421;
    --hs-green-800: #1d4a2d;
    --hs-green-700: #28613c;
    --hs-green-600: #347b4d;
    --hs-green-500: #449761;

    --hs-green-100: #e8f4eb;
    --hs-green-50: #f3f9f4;

    --hs-orange-700: #b96718;
    --hs-orange-600: #d47d21;
    --hs-orange-500: #ed9a3d;
    --hs-orange-100: #fff1df;

    --hs-red: #e5484d;
    --hs-red-soft: #fff0f0;

    /* ----- Ink / surfaces ----- */
    --hs-black: #172019;
    --hs-text: #26332b;
    --hs-text-2: #69766e;
    --hs-text-3: #929d96;

    --hs-bg: #f5f7f4;
    --hs-card: #ffffff;
    --hs-border: #e8ece8;

    /* ----- Radii ----- */
    --hs-radius-xs: 8px;
    --hs-radius-sm: 12px;
    --hs-radius: 18px;
    --hs-radius-lg: 26px;
    --hs-radius-xl: 34px;
    --hs-radius-pill: 999px;

    /* ----- Elevation ----- */
    --hs-shadow-xs:
        0 2px 8px rgba(25, 55, 35, .045);

    --hs-shadow-sm:
        0 5px 18px rgba(25, 55, 35, .07);

    --hs-shadow:
        0 12px 35px rgba(25, 55, 35, .10);

    --hs-shadow-lg:
        0 25px 70px rgba(25, 55, 35, .15);

    /* ----- Spacing scale ----- */
    --hs-space-2: 2px;
    --hs-space-4: 4px;
    --hs-space-6: 6px;
    --hs-space-8: 8px;
    --hs-space-10: 10px;
    --hs-space-12: 12px;
    --hs-space-14: 14px;
    --hs-space-16: 16px;
    --hs-space-20: 20px;
    --hs-space-24: 24px;
    --hs-space-28: 28px;
    --hs-space-32: 32px;
    --hs-space-40: 40px;
    --hs-space-48: 48px;
    --hs-space-56: 56px;
    --hs-space-64: 64px;

    /* ----- Motion ----- */
    --hs-ease: cubic-bezier(.2, .8, .2, 1);
    --hs-ease-out: cubic-bezier(.22, .61, .36, 1);
    --hs-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --hs-ease-smooth: cubic-bezier(.4, 0, .2, 1);
    --hs-dur-fast: .2s;
    --hs-dur: .35s;
    --hs-dur-slow: .6s;
    --hs-dur-slower: .8s;

    /* ----- Typography ----- */
    --hs-font-body: 'iranyekanFaNum', 'Vazir_FD', Tahoma, sans-serif;
    --hs-font-display: 'iranyekanFaNum', 'Vazir_FD', Tahoma, sans-serif;

    /* ----- Layout ----- */
    --hs-container: 1280px;
    --hs-gutter: 18px;

    /* ----- Glass / overlays ----- */
    --hs-glass-bg: rgba(255, 255, 255, .92);
    --hs-glass-border: rgba(255, 255, 255, .6);
    --hs-glass-shadow: 0 8px 32px rgba(15, 23, 42, .08);

    /* ----- Gradients ----- */
    --hs-gradient-brand:
        linear-gradient(135deg, var(--hs-green-600), var(--hs-green-800));
    --hs-gradient-accent:
        linear-gradient(135deg, var(--hs-orange-500), var(--hs-orange-700));
    --hs-gradient-glow:
        linear-gradient(90deg, var(--hs-green-500), var(--hs-orange-500));
}

/* Reduced motion — kill the entire token-driven motion vocabulary */
@media (prefers-reduced-motion: reduce) {
    :root {
        --hs-dur-fast: .01ms;
        --hs-dur: .01ms;
        --hs-dur-slow: .01ms;
        --hs-dur-slower: .01ms;
    }
}