/* ProAgri Client Portal - design tokens.
   THE contract every stylesheet in this app styles against. Nothing else may
   define a raw colour, radius, shadow or spacing value: use these vars.

   The brand slice used to be OVERWRITTEN AT RUNTIME, per client, by js/store.js.
   It is not any more. This portal is a ProAgriMedia product and wears
   ProAgriMedia CI on every screen; the only thing that varies per client is
   their name in the welcome line. The --pa-brand-* names are kept because every
   stylesheet already resolves against them, but they are now CONSTANTS.

   Source of truth: ProagriMedia Brand Guidelines 2025, p.17-19. The same palette
   is encoded in 05 Workflows/project-scope/scope.css - match that file rather
   than re-deriving values from a screenshot.

   The guideline weights the palette 20% black / 30% red / 30% navy / 10% yellow,
   and says in as many words that the colours may not be changed or swapped
   around. That weighting is why navy carries the chrome here and red is reserved
   for action: an all-red portal is off-brand even though red is "the" brand
   colour. A hardcoded hex anywhere else is still a bug - not because the app
   re-skins any more, but because one wrong red undoes the whole system. */

:root {
  /* ── ProAgriMedia CI ───────────────────────────────────────────────────────
     The four corporate colours, by their own names. Everything below is derived
     from these four and the neutral ramp. */
  --pa-red: #f03340;
  --pa-navy: #1c365c;
  --pa-black: #212421;
  --pa-yellow: #ffbf40;

  /* ── Brand slice (frozen) ──────────────────────────────────────────────────
     Red is ACTION: primary buttons, the active nav item, a count that needs
     attention. Accent is the dark surface colour - header, hero, phone chrome -
     and is navy, which is what gives navy its 30%. */
  --pa-brand-primary: var(--pa-red);
  --pa-brand-primary-hover: #d21f2c;
  --pa-brand-primary-contrast: #ffffff;
  --pa-brand-accent: var(--pa-navy);
  --pa-brand-accent-hover: #16294a;
  --pa-brand-accent-contrast: #ffffff;
  --pa-brand-radius: 18px;

  /* Poppins for headings and sub-headings, Roboto for sub-headings and body.
     Both are named in the guidelines (p.18-19); Roboto is also the logotype
     face, so body copy sits in the same family as the wordmark. */
  --pa-brand-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --pa-brand-font-display: 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Derived tints. Separate tokens so a component never has to write a
     color-mix of its own. */
  --pa-brand-soft: color-mix(in srgb, var(--pa-brand-primary) 8%, transparent);
  --pa-brand-soft-strong: color-mix(in srgb, var(--pa-brand-primary) 16%, transparent);
  --pa-brand-ring: color-mix(in srgb, var(--pa-brand-primary) 38%, transparent);
  --pa-accent-soft: color-mix(in srgb, var(--pa-brand-accent) 8%, transparent);
  --pa-accent-soft-strong: color-mix(in srgb, var(--pa-brand-accent) 16%, transparent);
  --pa-accent-ring: color-mix(in srgb, var(--pa-brand-accent) 38%, transparent);

  /* The one sanctioned gradient (p.17): red into navy. */
  --pa-brand-gradient: linear-gradient(135deg, var(--pa-red) 0%, var(--pa-navy) 100%);

  /* ── Neutrals ──────────────────────────────────────────────────────────────
     The ramp from scope.css, so the portal and the PDF collateral agree. */
  /* A warm-ish light grey, not white. The canvas has to be a shade DOWN from the
     cards so white panels floating on it read as floating. */
  --pa-bg: #eef0f3;
  --pa-surface: #ffffff;
  --pa-surface-2: #fbfcfd;
  --pa-surface-3: #eef1f4;
  --pa-border: #e3e6ea;
  --pa-border-strong: #c3cad3;
  --pa-text: #212421;
  --pa-text-muted: #6b7280;
  --pa-text-faint: #97a0ab;
  --pa-on-dark: #ffffff;
  --pa-on-dark-muted: #cdd6e2;

  /* ── Status ────────────────────────────────────────────────────────────────
     Drawn from the same four corporate colours, deliberately. There is no green
     in the ProAgriMedia CI, so "approved" is navy rather than an invented green:
       navy   = done, approved, settled
       yellow = waiting on the client
       red    = changes requested, overdue, needs attention
     --pa-info stays navy so an informational note reads as chrome, not alarm. */
  --pa-success: var(--pa-navy);
  --pa-success-soft: #e8edf4;
  --pa-warning: #a86a00;
  --pa-warning-soft: #fff4dd;
  --pa-warning-mark: var(--pa-yellow);
  --pa-danger: var(--pa-red);
  --pa-danger-soft: #fdecee;
  --pa-info: var(--pa-navy);
  --pa-info-soft: #e8edf4;

  /* ── Spacing (density 6/10) ────────────────────────────────────────────── */
  --pa-space-1: 4px;
  --pa-space-2: 8px;
  --pa-space-3: 12px;
  --pa-space-4: 16px;
  --pa-space-5: 24px;
  --pa-space-6: 32px;
  --pa-space-7: 48px;
  --pa-space-8: 64px;

  /* ── Radius ────────────────────────────────────────────────────────────────
     Generous, and deliberately so. The prototype's 14px was the midpoint of a
     slider in the branding editor - a number nobody chose. A client portal is a
     soft, reassuring product rather than a data terminal, and the shape language
     it should borrow is the floating-panel one: big rounded surfaces layered on
     a calm canvas, pill controls, depth from shadow rather than from hairlines.
     --pa-radius-xl is for the shell panels (the header bar, the hero, the page
     shelf), which are the largest surfaces and take the largest corner. */
  --pa-radius-sm: 12px;
  --pa-radius: var(--pa-brand-radius);
  --pa-radius-lg: calc(var(--pa-brand-radius) + 8px);
  --pa-radius-xl: 32px;
  --pa-radius-pill: 999px;

  /* ── Elevation ─────────────────────────────────────────────────────────────
     Shadows are tinted navy rather than neutral grey, so depth belongs to the
     palette too. */
  --pa-shadow-sm: 0 2px 6px -2px rgb(28 54 92 / 0.10), 0 1px 2px rgb(28 54 92 / 0.05);
  --pa-shadow: 0 10px 28px -10px rgb(28 54 92 / 0.18), 0 3px 8px -3px rgb(28 54 92 / 0.08);
  --pa-shadow-lg: 0 26px 60px -18px rgb(28 54 92 / 0.28), 0 8px 20px -8px rgb(28 54 92 / 0.12);

  /* ── Type scale ────────────────────────────────────────────────────────────
     Poppins runs optically larger than Instrument Serif at the same px, so the
     display end of the scale is pulled back a notch from the prototype. */
  --pa-text-xs: 12px;
  --pa-text-sm: 13px;
  --pa-text-base: 15px;
  --pa-text-md: 17px;
  --pa-text-lg: 20px;
  --pa-text-xl: 25px;
  --pa-text-2xl: 32px;
  --pa-text-3xl: 40px;

  /* Headings are Poppins SemiBold/Bold with tightened tracking; the guideline
     look is bold and geometric, and Poppins set loose reads as a default. */
  --pa-track-tight: -0.02em;
  --pa-track-heading: -0.015em;
  --pa-track-eyebrow: 0.08em;

  /* ── Motion (150-300ms, per the UX checklist) ──────────────────────────── */
  --pa-ease: cubic-bezier(0.2, 0.8, 0.3, 1);
  --pa-dur-fast: 140ms;
  --pa-dur: 220ms;
  --pa-dur-slow: 320ms;

  /* ── Layout ────────────────────────────────────────────────────────────────
     --pa-logo-clear is the 2X clear space the guideline demands around the
     logo (1X = the height of the counter inside the "P"). At a 30px logo the
     counter is roughly 7px, so 2X lands near 14px. Any surface that places the
     mark must honour this rather than eyeballing a gap. */
  --pa-shell-max: 1180px;
  --pa-reading-max: 760px;
  --pa-header-h: 64px;
  /* The inset the floating header and hero sit at, away from the viewport edge. */
  --pa-shell-inset: 16px;
  --pa-logo-h: 30px;
  --pa-logo-clear: 14px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pa-dur-fast: 0.01ms;
    --pa-dur: 0.01ms;
    --pa-dur-slow: 0.01ms;
  }
}