/* ZRM Design System tokens.
 * Lifted verbatim from mockup/index.html so the app and the mockups
 * cannot drift. Brand palette is authoritative, do not invent colours.
 */

:root {
  /* -- Brand primitives --------------------------------- */
  --c-white: #FFFFFF;
  --c-gray-100: #EBEBEB;
  --c-warm-100: #EEEAE6;
  --c-cool-100: #EDF3F6;

  --c-navy-900: #0D1A27;
  --c-navy-700: #273C61;
  --c-blue-600: #205799;
  --c-blue-300: #94C2FF;

  --c-accent: #FF7800;       /* Brand accent orange */
  --c-ink-900: #282828;
  --c-ink-700: #424242;
  --c-ink-500: #535353;

  /* -- Semantic roles (Light theme) --------------------- */
  --c-primary: var(--c-blue-600);           /* #205799, links, primary buttons */
  --c-primary-deep: var(--c-navy-700);      /* #273C61, headings, nav */
  --c-primary-contrast: var(--c-white);
  --c-primary-soft: var(--c-cool-100);      /* active nav bg */
  --c-primary-border: var(--c-blue-300);    /* hover/focus border */

  --c-bg: var(--c-cool-100);                /* app shell */
  --c-surface: var(--c-white);              /* cards / tiles */
  --c-surface-alt: var(--c-warm-100);       /* subtle alt surface */

  --c-text: var(--c-navy-900);              /* default text */
  --c-text-strong: var(--c-ink-900);        /* labels */
  --c-text-muted: var(--c-ink-500);         /* secondary text */
  --c-border: var(--c-gray-100);

  /* Status pastels, derived from brand hues */
  --c-danger: #E11D48;
  --c-danger-soft: #FEE4E9;
  --c-success: #00B37E;
  --c-success-soft: #E2F7EF;
  --c-warning: #CA8A04;
  --c-warning-soft: #FFF5CC;

  /* -- Category/chart palette --------------------------- */
  --c-chart-1: var(--c-blue-600);    /* #205799 */
  --c-chart-2: var(--c-accent);      /* #FF7800 */
  --c-chart-3: #00B37E;
  --c-chart-4: var(--c-navy-700);    /* #273C61 */
  --c-chart-5: #FFC700;
  --c-chart-6: var(--c-blue-300);    /* #94C2FF */
  --c-chart-7: #E11D48;

  /* -- Pipeline stage colors (punchy) ------------------- */
  --stage-idea: var(--c-blue-300);           /* #94C2FF */
  --stage-interest: #00B37E;
  --stage-proposal: #FFC700;
  --stage-offer-sent: var(--c-accent);       /* #FF7800 */
  --stage-closed-won: var(--c-navy-700);     /* #273C61 */
  --stage-closed-lost: #E11D48;

  /* -- Status / badge tokens ---------------------------- */
  --c-status-lead-bg: var(--c-cool-100);     --c-status-lead-fg: var(--c-blue-600);
  --c-status-customer-bg: #E2F7EF;           --c-status-customer-fg: #00875F;
  --c-status-old-bg: var(--c-gray-100);      --c-status-old-fg: var(--c-ink-500);
  --c-status-proposal-bg: #FFF5CC;           --c-status-proposal-fg: #8A5A00;
  --c-status-won-bg: #E2F7EF;                --c-status-won-fg: #00875F;
  --c-status-lost-bg: #FEE4E9;               --c-status-lost-fg: #E11D48;
  --c-status-accent-bg: #FFE9D6;             --c-status-accent-fg: var(--c-accent);

  /* -- Radii ---------------------------------------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-2xl: 14px;
  --r-3xl: 16px;
  --r-pill: 99px;

  /* -- Frames (brand structuring device) ---------------- */
  /* Official ZRM material uses FRAMES, never shadows. Depth = borders + colour. */
  --frame-width: 2px;
  --frame-color: var(--c-navy-900);        /* #0D1A27 */
  --frame: var(--frame-width) solid var(--frame-color);
  --frame-radius: 0px;                      /* frames are square by brand default */
  --img-ratio: 3 / 4; /* @kind other */    /* portrait imagery, 600×800 */

  /* -- Shadows (CRM PRODUCT UI ONLY, never in brand material) --
   * Per Brand Guidelines, official slides/docs/marketing use NO shadows.
   * These tokens exist only for the dense in-app CRM surface. */
  --shadow-xs: 0 1px 2px rgb(13 26 39 / 0.05);
  --shadow-sm: 0 1px 3px rgb(13 26 39 / 0.06);
  --shadow-md: 0 1px 3px rgb(13 26 39 / 0.05);
  --shadow-card: 0 1px 3px rgb(13 26 39 / 0.06);
  --shadow-popover: 0 8px 24px rgb(13 26 39 / 0.12), 0 2px 6px rgb(13 26 39 / 0.06);
  --shadow-modal: 0 20px 60px rgb(13 26 39 / 0.22), 0 4px 12px rgb(13 26 39 / 0.10);
  --shadow-login: 0 4px 24px rgb(13 26 39 / 0.09), 0 1px 4px rgb(13 26 39 / 0.05);
  --shadow-ai: -8px 0 32px rgb(13 26 39 / 0.14);

  /* Focus ring */
  --ring-primary: 0 0 0 3px rgb(32 87 153 / 0.18);
  --ring-accent:  0 0 0 3px rgb(255 120 0 / 0.22);
  --ring-danger:  0 0 0 3px rgb(225 29 72 / 0.14);

  /* Scrims */
  --scrim-modal: rgb(13 26 39 / 0.45);
  --scrim-overlay: rgb(13 26 39 / 0.35);

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

  /* -- Type ---------------------------------------- */
  /* Display / headings / uppercase eyebrows: Helvetica Neue Bold */
  --font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Body copy: Open Sans (Google Fonts) */
  --font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --fs-base: 14px;
  --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px;
  --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-17: 17px;
  --fs-18: 18px; --fs-20: 20px; --fs-22: 22px;

  --fw-400: 400; /* @kind other */
  --fw-500: 500; /* @kind other */
  --fw-600: 600; /* @kind other */
  --fw-700: 700; /* @kind other */

  --lh-tight: 1.2; /* @kind other */
  --lh-normal: 1.4; /* @kind other */

  --ls-tight-5: -0.5px;
  --ls-tight-4: -0.4px;
  --ls-tight-3: -0.3px;
  --ls-tight-2: -0.2px;
  --ls-uppercase: 0.06em;
}