/* theme.css — Dunboxed Recruit design tokens.
   Direction: modern "product-SaaS" (Linear/Stripe/Vercel-style) — neutral gray scale,
   hairline borders over heavy elevation, ONE restrained violet accent, compact density,
   small radii, Inter type. @material/web reads the --md-sys-color-* / shape tokens, so
   theming here restyles the MWC controls too. Structured for a later dark theme. */

/* ---- Inter (self-hosted variable woff2) ---- */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/static/fonts/Inter-Variable.woff2') format('woff2');
}

:root {
  color-scheme: light;

  /* ---- Brand ---- */
  --brand-deep-violet:#32009A; --brand-vivid-violet:#805AFF; --brand-lemon:#FFF748;

  /* ---- M3 colour roles — neutral grays + one violet accent ---- */
  --md-sys-color-primary:#32009A;               --md-sys-color-on-primary:#FFFFFF;
  --md-sys-color-primary-container:#ECE8FB;      --md-sys-color-on-primary-container:#241468;
  --md-sys-color-secondary:#5B3DF5;              --md-sys-color-on-secondary:#FFFFFF;
  --md-sys-color-secondary-container:#ECE8FB;    --md-sys-color-on-secondary-container:#2A1A6B;
  --md-sys-color-tertiary:#6C6800;               --md-sys-color-on-tertiary:#FFFFFF;
  --md-sys-color-tertiary-container:#FFF748;     --md-sys-color-on-tertiary-container:#1F1E00;
  --md-sys-color-error:#B3261E;                  --md-sys-color-on-error:#FFFFFF;
  --md-sys-color-error-container:#FDECEC;        --md-sys-color-on-error-container:#8C1D18;

  /* neutral surface/text ladder (zinc-like, faint violet warmth) */
  --md-sys-color-surface:#FFFFFF;                --md-sys-color-on-surface:#18181B;
  --md-sys-color-surface-variant:#F4F4F6;        --md-sys-color-on-surface-variant:#5B5F6B;
  /* text on TINTED fills (badges/chips/banners/muted-on-container/pending pill): darker
     than on-surface-variant so 12-13px labels clear >=6:1 on every container gray. */
  --md-sys-color-on-tinted:#4A4E59;
  --md-sys-color-surface-container-lowest:#FFFFFF;
  --md-sys-color-surface-container-low:#FAFAFB;
  --md-sys-color-surface-container:#F4F4F6;
  --md-sys-color-surface-container-high:#ECECEF;
  --md-sys-color-surface-container-highest:#E4E4E8;
  --md-sys-color-background:#FBFBFC;             --md-sys-color-on-background:#18181B;
  --md-sys-color-outline:#D6D6DB;                --md-sys-color-outline-variant:#EBEBEF;
  --md-sys-color-inverse-surface:#27272A;        --md-sys-color-inverse-on-surface:#FAFAFA;
  --md-sys-color-inverse-primary:#C6B7FF;

  /* extension roles (badges/banners) */
  --dbx-success:#16794C; --dbx-success-container:#E7F5EE; --dbx-on-success-container:#0B4A2E;
  --dbx-warning:#8A5A00; --dbx-warning-container:#FCF3E3; --dbx-on-warning-container:#5A3D00;
  --dbx-danger-outline:#E4B7B3;   /* softer red outline for destructive outlined buttons */
  --funnel-s2:#9A7BFF;            /* funnel stage-2 bar (was hardcoded) */

  /* ---- Typography: Inter, tight tracking ---- */
  --md-ref-typeface-brand:'Inter','Segoe UI',system-ui,sans-serif;
  --md-ref-typeface-plain:'Inter','Segoe UI',system-ui,sans-serif;
  --font-headline-m:600 26px/32px var(--md-ref-typeface-brand);
  --font-headline-s:600 22px/28px var(--md-ref-typeface-brand);   /* h1 */
  --font-title-l:600 18px/24px var(--md-ref-typeface-brand);
  --font-title-m:600 15px/22px var(--md-ref-typeface-brand);      /* h2 / card titles */
  --font-title-s:600 13px/18px var(--md-ref-typeface-brand);
  --font-body-l:400 15px/23px var(--md-ref-typeface-plain);
  --font-body-m:400 13.5px/20px var(--md-ref-typeface-plain);     /* default */
  --font-body-s:400 12.5px/17px var(--md-ref-typeface-plain);     /* muted / captions */
  --font-label-l:500 13.5px/20px var(--md-ref-typeface-brand);    /* buttons / actions */
  --font-label-m:500 12px/16px var(--md-ref-typeface-brand);

  /* ---- Shape (small radii) ---- */
  --md-sys-shape-corner-xs:4px; --md-sys-shape-corner-sm:6px; --md-sys-shape-corner-md:8px;
  --md-sys-shape-corner-lg:10px; --md-sys-shape-corner-xl:14px; --md-sys-shape-corner-full:999px;

  /* ---- Elevation (minimal — borders do the separating) ---- */
  --md-sys-elevation-1:0 1px 2px rgba(24,24,27,.05);
  --md-sys-elevation-2:0 1px 3px rgba(24,24,27,.08),0 1px 2px rgba(24,24,27,.04);
  --md-sys-elevation-3:0 6px 16px rgba(24,24,27,.12);

  /* ---- Spacing (4px base) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-10:40px;

  /* ---- State + focus ---- */
  --focus-ring-width:2px; --focus-ring-offset:2px; --focus-ring-color:var(--md-sys-color-secondary);
  --tap-min:44px;   /* min hit target under @media (pointer:coarse); 32px kept under pointer:fine */

  /* ---- Motion ---- */
  --motion-short:130ms; --motion-medium:240ms; --ease-standard:cubic-bezier(0.2,0,0,1);

  /* ---- Layout ---- */
  --layout-max-width:1600px; --app-bar-height:56px; --rail-width:232px;

  /* ---- MWC control tuning: small radius, restrained ---- */
  --md-sys-color-surface-tint:transparent;
  --md-filled-button-container-shape:var(--md-sys-shape-corner-md);
  --md-outlined-button-container-shape:var(--md-sys-shape-corner-md);
  --md-text-button-container-shape:var(--md-sys-shape-corner-md);
  --md-filled-button-container-height:38px;
  --md-outlined-button-container-height:38px;
  --md-outlined-text-field-container-shape:var(--md-sys-shape-corner-sm);
  --md-outlined-select-text-field-container-shape:var(--md-sys-shape-corner-sm);
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-short:1ms; --motion-medium:1ms; }
}