/* Posternik DS tokens — inherited from design system (colors + typography + spacing).
   Source of truth: _ds/posternik-design-system-170aaf7b-.../tokens/*.css */

/* ============================================================
   Posternik — Color tokens
   Structure: ONE brand core (single source of truth), then two
   thin preset layers that only alias/override for their surface:
     • APP     — dense wage-audit product (cool #EFF5FB page)
     • MARKETING — airy public site (white page, navy bands)
   Core values are declared once; app/marketing tokens point at
   them so nothing drifts. Values from the Angular app + website.
   ============================================================ */
:root {
  /* ==========================================================
     1 · BRAND CORE  — the single source of truth. Change a
     brand value HERE and both surfaces follow.
     ========================================================== */
  --brand-navy:    #001E5D;   /* the one navy: ink + deep surfaces */
  --brand-blue:    #219FFA;   /* primary / actions / links */
  --brand-blue-d:  #0B6FC2;
  --brand-blue-l:  #E4F3FF;
  --brand-green:   #12B886;   /* confirm / save / pay / success */
  --brand-green-d: #0EA574;
  --brand-green-l: #E6FCF5;
  --brand-t2:      #4A6089;   /* secondary text (both surfaces) */
  --brand-t3:      #8DA0BF;   /* tertiary / placeholder */

  /* Shared SEMANTIC / category accent scale — used by app states
     AND the marketing feature grid. One value per hue. */
  --sem-blue:   var(--brand-blue);   --sem-blue-l:   var(--brand-blue-l);
  --sem-green:  var(--brand-green);  --sem-green-l:  #E9F9F2;
  --sem-red:    #E5484D;             --sem-red-l:    #FDECEC;  /* error / negative / defects */
  --sem-amber:  #D98324;             --sem-amber-l:  #FFF4E5;  /* documents / files */
  --sem-purple: #6E56CF;             --sem-purple-l: #F0EDFB;  /* agreements */

  /* ==========================================================
     2 · APP PRESET  (dense product shell)
     ========================================================== */
  /* Surfaces */
  --bg: #EFF5FB;                      /* page background */
  --solid: #FFFFFF;                   /* cards, table rows */
  --surface: rgba(255, 255, 255, .85);/* glass cards (needs blur) */
  --hover: #F5F8FC;                   /* hover rows, table headers */

  /* Borders / dividers */
  --border: rgba(0, 30, 93, .07);     /* hairline dividers */
  --border2: rgba(0, 30, 93, .12);    /* input & header borders */

  /* Text — all resolve to the core */
  --ink: var(--brand-navy);           /* primary text / headings */
  --t2: var(--brand-t2);              /* secondary text */
  --t3: var(--brand-t3);              /* tertiary / placeholder */

  /* Primary — sky blue */
  --pri: var(--brand-blue);
  --pri-d: var(--brand-blue-d);
  --pri-l: var(--brand-blue-l);

  /* Navy — headings, primary nav "next" */
  --navy: var(--brand-navy);
  --navy2: #0A3278;                   /* navy hover (one-off tint) */

  /* Green — confirm / save / payment */
  --grn: var(--brand-green);
  --grn-d: var(--brand-green-d);
  --grn-l: var(--brand-green-l);

  /* Gold — WARNINGS only. Kept distinct from --sem-amber on
     purpose: "attention/caution" is a different role from the
     marketing "documents" category hue. */
  --gold: #F5A623;
  --gold-d: #D4911A;
  --gold-l: #FFF8E8;

  /* Negative — errors & negative amounts → shared semantic red */
  --neg: var(--sem-red);

  /* WhatsApp brand green (public pages) */
  --whatsapp: #25D366;

  /* ==========================================================
     3 · MARKETING PRESET  (airy public site)
     Only overrides what actually differs for the site: white
     page, alternating tints, navy bands, softer borders, body
     link color. Ink & band both resolve to the core navy.
     ========================================================== */
  --mkt-ink:  var(--brand-navy);      /* headings & body on white */
  --mkt-link: #1E81CE;                /* link (a touch deeper than --pri) */
  --mkt-link-hover: var(--brand-navy);

  /* Marketing surfaces */
  --mkt-bg: #FFFFFF;                  /* page */
  --mkt-tint: #F7F9FC;               /* alternating section band */
  --mkt-tint-blue: #F6FAFF;         /* hero / airy gradient top */
  --mkt-band: var(--brand-navy);    /* dark navy feature band / CTA */

  /* On-navy text (inside the dark band) */
  --mkt-on-band: #B9C9E6;           /* body on navy */
  --mkt-on-band-soft: #9FB8DD;      /* muted meta on navy */
  --mkt-on-band-accent: #7FC4FF;    /* eyebrow / stat highlight on navy */

  /* Marketing borders (lighter than the app's navy-alpha rules) */
  --mkt-border: #EEF2F8;            /* section dividers, card hairline */
  --mkt-border2: #E6ECF5;          /* stronger card border */
  --mkt-border-btn: #D9E2F0;       /* outline-button border */

  /* Category accents — thin aliases onto the shared semantic
     scale, so the site grid and app states never diverge. */
  --acc-blue: var(--sem-blue);     --acc-blue-l: var(--sem-blue-l);   /* scan */
  --acc-green: var(--sem-green);   --acc-green-l: var(--sem-green-l); /* rights */
  --acc-red: var(--sem-red);       --acc-red-l: var(--sem-red-l);     /* defects */
  --acc-purple: var(--sem-purple); --acc-purple-l: var(--sem-purple-l); /* agreements */
  --acc-amber: var(--sem-amber);   --acc-amber-l: var(--sem-amber-l); /* documents */
}

/* ============================================================
   Posternik — Typography tokens
   Heebo across the whole product. RTL Hebrew UI. Numbers in
   tables always use tabular-nums.
   ============================================================ */
:root {
  --font-sans: 'Heebo', 'Assistant', sans-serif;

  /* Role fonts: app UI is all Heebo; the marketing site pairs a
     Heebo DISPLAY face for headings with an Assistant BODY face. */
  --font-display: 'Heebo', sans-serif;   /* headings, eyebrows, stats */
  --font-body: 'Assistant', sans-serif;  /* marketing paragraph copy */

  /* Weights (Heebo ships 300–900) */
  --fw-light: 300;    /* @kind font */
  --fw-regular: 400;  /* @kind font */
  --fw-medium: 500;   /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700;     /* @kind font */
  --fw-extrabold: 800;/* @kind font */
  --fw-black: 900;    /* @kind font */

  /* Type scale (px) — page titles down to micro labels */
  --fs-page-title: 26px;   /* fw 900, letter-spacing -.5px */
  --fs-h2: 22px;
  --fs-section: 18px;      /* section headers, fw 800 */
  --fs-card-title: 15px;   /* fw 800 */
  --fs-body: 14px;
  --fs-body-sm: 13px;
  --fs-cell: 12px;         /* table cells */
  --fs-label: 11px;        /* labels, fw 600–700 */
  --fs-micro: 10px;        /* floating labels, tags */

  /* Marketing display scale (Heebo 800, tight tracking) */
  --fs-hero: 52px;         /* homepage h1 */
  --fs-display: 40px;      /* section h2 */
  --fs-eyebrow: 14px;      /* section eyebrow, weight 700, +1px tracking */

  --lh-tight: 1.2;    /* @kind font */
  --lh-normal: 1.5;   /* @kind font */
  --lh-relaxed: 1.7;  /* @kind font */

  --ls-title: -0.5px; /* @kind font */
}

/* ============================================================
   Posternik — Radii, shadows, spacing, motion
   ============================================================ */
:root {
  /* Corner radii */
  --r: 14px;        /* base card radius */
  --r-sm: 10px;     /* table wrapper, small cards */
  --r-btn: 8px;     /* buttons, inputs */
  --r-pill: 100px;  /* pills, chips, status badges */
  --r-drawer: 20px; /* drawer top corners */

  /* Shadows — one elevation ladder, low & navy-tinted. App uses
     1–2; the marketing site reaches for 3–5 on hero/CTA/featured.
     Color-glow shadows (pri/grn/cta) are role-specific, not levels. */
  --shadow: 0 2px 8px rgba(0, 30, 93, .04);          /* 1 · resting card (app) */
  --shadow-hover: 0 6px 20px rgba(0, 30, 93, .07);   /* 2 · lifted card (app) */
  --shadow-pri: 0 2px 10px rgba(33, 159, 250, .25);  /* blue button glow */
  --shadow-grn: 0 2px 10px rgba(18, 184, 134, .25);  /* green button glow */
  --shadow-drawer: 0 -8px 40px rgba(0, 15, 50, .15); /* bottom drawer */
  --ring-pri: 0 0 0 3px rgba(33, 159, 250, .1);      /* input focus ring */

  /* Marketing elevations — same ladder, higher rungs */
  --shadow-cta: 0 14px 26px -10px rgba(33, 159, 250, .7);  /* blue glow CTA */
  --shadow-float: 0 30px 60px -20px rgba(0, 30, 93, .4);   /* 4 · hero product frame */
  --shadow-navy: 0 24px 50px -20px rgba(4, 21, 67, .55);   /* featured navy card */

  /* Marketing radii — rounder than the app */
  --r-mkt-card: 16px;   /* feature / capability card */
  --r-mkt-panel: 18px;  /* pricing card, info panel */
  --r-mkt-hero: 22px;   /* CTA banner, big rounded block */

  /* Glass */
  --glass: saturate(180%) blur(20px); /* @kind other */

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Motion — soft, quick */
  --ease-out: cubic-bezier(.16, 1, .3, 1);   /* @kind other */
  --ease-inout: cubic-bezier(.4, 0, .2, 1);  /* @kind other */
  --dur-fast: .12s; /* @kind other */
  --dur: .2s;       /* @kind other */
  --dur-slow: .35s; /* @kind other */
}