/* Drayage Cloud Portal — design tokens for the Blazor web app.
   Translated from the Cosmosoto design system (tokens/*.css, which mirror ThemeData.cs).
   The desktop apps draw these through SkiaSharp; the Portal is plain HTML/CSS, so the same
   values live here as CSS custom properties. Put data-theme="dark" | "light" on <html>. */

@font-face{font-family:"Material Symbols Rounded Cosmosoto";src:url("../fonts/MaterialSymbolsRounded-Cosmosoto.ttf") format("truetype");font-weight:400;font-style:normal;font-display:block}

:root,[data-theme="dark"]{
  --app-background:#1E1F22;
  --surface:#2B2D31;
  --surface-hover:#3A3D42;
  --surface-pressed:#45484F;
  --control-disabled:#25262A;
  --border:#43464C;
  --border-disabled:#33353A;
  --text:#FFFFFF;
  --text-muted:#B8BCC2;
  --text-disabled:#686C74;
  --text-on-accent:#FFFFFF;
  --accent:#3574F0;
  --accent-text:#7BA5F5;
  --accent-hover:#4A82F2;
  --accent-pressed:#2B62D4;
  --accent-disabled:#2E3D63;
  --track-background:#43464C;
  --selection:rgba(53,116,240,.376);
  --status-pass:#499C54;
  --status-pass-text:#7FBE89;
  --status-warn-text:#E0A800;
  --status-fail:#DB5C5C;
  --shadow-rest:0 2px 4px rgba(0,0,0,.259),0 0 2px rgba(0,0,0,.2);
  --shadow-flyout:0 8px 16px rgba(0,0,0,.259),0 0 2px rgba(0,0,0,.2);
}
[data-theme="light"]{
  --app-background:#F5F5F7;
  --surface:#FFFFFF;
  --surface-hover:#F2F2F4;
  --surface-pressed:#E9E9EC;
  --control-disabled:#F0F0F2;
  --border:#D9D9DE;
  --border-disabled:#E8E8EB;
  --text:#1A1C1F;
  --text-muted:#60646C;
  --text-disabled:#A9ACB2;
  --text-on-accent:#FFFFFF;
  --accent:#2F66E0;
  --accent-text:#2F66E0;
  --accent-hover:#2A5BC9;
  --accent-pressed:#2450B0;
  --accent-disabled:#B9CDF5;
  --track-background:#C8C9D0;
  --selection:rgba(47,102,224,.333);
  --status-pass:#2F8A3B;
  --status-pass-text:#2F8A3B;
  --status-warn-text:#A06800;
  --status-fail:#C43D3D;
  --shadow-rest:0 2px 4px rgba(0,0,0,.141),0 0 2px rgba(0,0,0,.122);
  --shadow-flyout:0 8px 16px rgba(0,0,0,.141),0 0 2px rgba(0,0,0,.122);
}

:root{
  /* Type — system-resolved, no web font for text. Do not swap in a lookalike. */
  --font-ui:-apple-system,"SF Pro Text","SF Pro","Segoe UI Variable Text","Segoe UI","Helvetica Neue",Inter,"Noto Sans","DejaVu Sans","Liberation Sans",sans-serif;
  --font-mono:Menlo,Consolas,"Cascadia Mono","DejaVu Sans Mono","Liberation Mono","Noto Sans Mono","Ubuntu Mono",ui-monospace,"Courier New",monospace;
  --font-icon:"Material Symbols Rounded Cosmosoto","Material Symbols Rounded";

  /* Radius */
  --radius-small:4px;
  --radius-medium:6px;   /* fields, buttons */
  --radius-card:8px;
  --radius-large:10px;
  --radius-pill:999px;

  /* Motion — no bounce, no overshoot */
  --duration-fast:100ms;
  --ease-standard:cubic-bezier(.33,1,.68,1);
  --state-fade:background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard);
}
@media (prefers-reduced-motion:reduce){:root{--duration-fast:0ms}}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-ui);font-size:14px;color:var(--text);background:var(--app-background);-webkit-font-smoothing:antialiased}
a{color:var(--accent-text);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--selection)}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}