/* ==========================================================================
   NetWelop — design tokens
   Layer 1 of the design system. Nothing here paints anything; every visual
   decision downstream resolves through these variables.

   Palette keeps the brand indigo/cyan the site already owned, retuned for a
   dark surface, and adds emerald as the product/"verified" signal (it is the
   colour the Micro-ERP identity already uses).
   ========================================================================== */

/* Cascade order is declared once, here, so it no longer depends on which
   stylesheet the browser happens to parse first. Later layers win. */
@layer tokens, base, layout, components, utilities;

@layer tokens {
  :root {
    /* ---------------------------------------------------------- primitives */
    --ink-950: #04060d;
    --ink-900: #070a14;
    --ink-850: #0a0e1b;
    --ink-800: #0e1424;
    --ink-750: #131a2e;
    --ink-700: #1a2238;
    --ink-600: #273049;
    --ink-500: #3b4763;
    --ink-400: #5b6885;
    --ink-300: #8792ab;
    --ink-200: #b3bccd;
    --ink-100: #d8dee9;
    --ink-050: #eef2f8;

    --indigo-600: #4f46e5;
    --indigo-500: #6366f1;
    --indigo-400: #818cf8;
    --indigo-300: #a5b4fc;

    --cyan-600: #0891b2;
    --cyan-500: #06b6d4;
    --cyan-400: #22d3ee;
    --cyan-300: #67e8f9;

    --emerald-600: #059669;
    --emerald-500: #10b981;
    --emerald-400: #34d399;

    --amber-500: #f59e0b;
    --rose-500: #f43f5e;

    /* ------------------------------------------------------------ semantic */
    --bg: var(--ink-950);
    --bg-raised: var(--ink-900);
    --surface: color-mix(in oklab, var(--ink-850) 88%, transparent);
    --surface-2: color-mix(in oklab, var(--ink-800) 92%, transparent);
    --surface-glass: color-mix(in oklab, var(--ink-800) 55%, transparent);

    --text: #e9eefb;
    --text-strong: #ffffff;
    --text-muted: #9aa6bf;
    --text-dim: #6c7893;

    --line: color-mix(in oklab, #ffffff 8%, transparent);
    --line-strong: color-mix(in oklab, #ffffff 15%, transparent);
    --line-accent: color-mix(in oklab, var(--indigo-500) 45%, transparent);

    --brand: var(--indigo-500);
    --brand-alt: var(--cyan-400);
    --brand-ink: #ffffff;
    --accent: var(--emerald-500);
    --warning: var(--amber-500);
    --danger: var(--rose-500);

    /* Focus ring — never removed, only restyled */
    --ring: var(--cyan-400);

    /* ------------------------------------------------------------ gradients */
    --grad-brand: linear-gradient(110deg, var(--indigo-500), var(--cyan-400));
    --grad-brand-soft: linear-gradient(
      110deg,
      color-mix(in oklab, var(--indigo-500) 22%, transparent),
      color-mix(in oklab, var(--cyan-400) 18%, transparent)
    );
    --grad-product: linear-gradient(110deg, var(--emerald-500), var(--cyan-400));
    --grad-text: linear-gradient(96deg, #ffffff 12%, var(--indigo-300) 48%, var(--cyan-300) 88%);
    --grad-sheen: linear-gradient(
      100deg,
      transparent 20%,
      color-mix(in oklab, #ffffff 22%, transparent) 50%,
      transparent 80%
    );

    /* ------------------------------------------------------------- spacing */
    /* 4pt base scale */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;
    --sp-32: 8rem;

    /* Fluid section rhythm */
    --section-y: clamp(4.5rem, 9vw, 9rem);
    --gutter: clamp(1.15rem, 4vw, 2.5rem);
    --container: 78rem;
    --container-narrow: 52rem;
    --container-wide: 90rem;

    /* ---------------------------------------------------------- typography */
    --font-sans: "Inter var", "Inter", system-ui, -apple-system, "Segoe UI", roboto, sans-serif;
    --font-fa: "Vazirmatn", "IRANSans", system-ui, sans-serif;
    --font-display: var(--font-sans);
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", menlo, monospace;
    --font-body: var(--font-sans);

    /* Fluid type scale — 1.25 ratio at mobile widening to ~1.333 on desktop */
    --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
    --fs-sm: clamp(0.8125rem, 0.79rem + 0.2vw, 0.9375rem);
    --fs-base: clamp(0.95rem, 0.91rem + 0.25vw, 1.0625rem);
    --fs-md: clamp(1.05rem, 1rem + 0.35vw, 1.1875rem);
    --fs-lg: clamp(1.2rem, 1.1rem + 0.5vw, 1.4375rem);
    --fs-xl: clamp(1.45rem, 1.25rem + 0.9vw, 1.9rem);
    --fs-2xl: clamp(1.8rem, 1.45rem + 1.6vw, 2.6rem);
    --fs-3xl: clamp(2.2rem, 1.6rem + 2.7vw, 3.6rem);
    --fs-4xl: clamp(2.3rem, 1.6rem + 2.8vw, 3.9rem);
    --fs-hero: clamp(2.4rem, 1.55rem + 3.6vw, 4.6rem);

    --lh-tight: 1.08;
    --lh-snug: 1.25;
    --lh-normal: 1.6;
    --lh-relaxed: 1.85;

    --tracking-tight: -0.03em;
    --tracking-snug: -0.015em;
    --tracking-wide: 0.02em;
    --tracking-caps: 0.14em;

    /* --------------------------------------------------------------- radii */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-2xl: 36px;
    --r-full: 999px;

    /* ------------------------------------------------------------- shadows */
    --sh-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --sh-md: 0 8px 24px -8px rgb(0 0 0 / 0.55);
    --sh-lg: 0 24px 60px -20px rgb(0 0 0 / 0.7);
    --sh-xl: 0 40px 110px -30px rgb(0 0 0 / 0.8);
    --sh-glow: 0 0 0 1px color-mix(in oklab, var(--indigo-500) 35%, transparent),
      0 18px 60px -22px color-mix(in oklab, var(--indigo-500) 70%, transparent);
    --sh-glow-accent: 0 0 0 1px color-mix(in oklab, var(--emerald-500) 35%, transparent),
      0 18px 60px -22px color-mix(in oklab, var(--emerald-500) 60%, transparent);

    /* -------------------------------------------------------------- motion */
    --dur-fast: 140ms;
    --dur: 240ms;
    --dur-slow: 420ms;
    --dur-slower: 720ms;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* --------------------------------------------------------------- z-index */
    --z-base: 1;
    --z-raised: 10;
    --z-sticky: 100;
    --z-nav: 500;
    --z-overlay: 900;
    --z-modal: 1000;
    --z-toast: 1100;

    /* Set by JS on scroll; used for the nav progress bar */
    --scroll-progress: 0;

    color-scheme: dark;
  }

  /* The Persian side swaps the body face and slightly loosens leading — the
     Arabic script needs more vertical room than Latin at the same size. */
  :root:lang(fa),
  [dir="rtl"] {
    --font-body: var(--font-fa);
    --font-display: var(--font-fa);
    --lh-tight: 1.28;
    --lh-snug: 1.45;
    --lh-normal: 1.85;
    --lh-relaxed: 2.05;
    --tracking-tight: 0;
    --tracking-snug: 0;
    /* Persian words are longer than their English equivalents and cannot be
       hyphenated, so display sizes are pulled back a step to keep headlines
       to two or three lines instead of overflowing the column. */
    --fs-4xl: clamp(2rem, 1.5rem + 2.2vw, 3.2rem);
    --fs-hero: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem);
  }
}