/* Trusted Ordre agent — tokens. Kilde: docs/design/brand/tokens.md (trustedglobal.com) */

@font-face{font-family:"Sailec";src:url("fonts/sailec-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Sailec";src:url("fonts/sailec-medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Sailec";src:url("fonts/sailec-bold.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  /* brand palette */
  --orange-100:#fff2d3; --orange-500:#ff8e0a; --orange-600:#ff7500; --orange-700:#cc5502;
  --gray-50:#f8f9f9; --gray-100:#eeeef0; --gray-200:#d9dade; --gray-300:#b7bac2;
  --gray-400:#9095a0; --gray-500:#717784; --gray-600:#5c606d; --gray-700:#4c505a;
  --gray-800:#42454c; --gray-900:#36383e; --gray-950:#25262a; --white:#ffffff;
  --pin:#f47400; --accent:var(--orange-600); --accent-deep:var(--orange-700);

  /* type */
  --font:"Sailec",system-ui,-apple-system,sans-serif;
  --fs-body:14px; --fs-sub:12.5px; --fs-tag:11px; --fs-pill:12px; --fs-title:23px; --fs-toast:18px;

  /* shape */
  --r-pill:9999px; --r-card:10px; --r-input:8px; --r-tag:6px;
  --shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.10),0 4px 6px -4px rgba(0,0,0,.10);

  /* size */
  --row-h:52px; --control-h:32px; --pill-h:22px;

  /* surfaces & text — light */
  --bg:var(--gray-50); --surface:var(--white);
  --topbar:var(--gray-950); --topbar-rule:var(--gray-950);
  --topbar-text:var(--white); --topbar-text-2:var(--gray-300);
  --text:var(--gray-950); --text-2:var(--gray-700); --text-3:var(--gray-600);
  --rule:var(--gray-200); --rule-soft:var(--gray-100);
  --line:var(--gray-300); --line-hover:var(--gray-400);
  --hover:#f3f4f5; --skeleton:var(--gray-100);
  --focus:var(--orange-700);
  --match:var(--orange-700);
  --step-tint:rgba(255,117,0,.06);
  --input-bg:var(--white); --input-border:var(--gray-200);
  --btn-primary-bg:var(--gray-950); --btn-primary-text:var(--white); --btn-primary-border:transparent;
  --toast-bg:var(--gray-950); --toast-text:var(--white); --toast-border:transparent;

  /* status tints — light */
  --amber-bg:#fdf3de; --amber-border:#ecd9ab; --amber-text:#7a5200; --amber-dot:#b97b00;
  --green-bg:#e4f2e7; --green-border:#c2dfc9; --green-text:#1e6b34;
  --red-bg:#fbe9e7; --red-border:#f0c9c3; --red-text:#b02a1c;
  --blue-bg:#e8edf3; --blue-border:#cfd9e4; --blue-text:#3f566e;
  --neutral-bg:var(--gray-100); --neutral-border:var(--gray-200); --neutral-text:var(--gray-700);
  --ok-dot:#2f9e4d;
}

/* dark — follows the system unless the toggle set light */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:var(--gray-950); --surface:var(--gray-900);
    --topbar:var(--gray-900); --topbar-rule:var(--gray-800);
    --topbar-text:var(--white); --topbar-text-2:var(--gray-300);
    --text:var(--gray-100); --text-2:var(--gray-300); --text-3:var(--gray-300);
    --rule:var(--gray-800); --rule-soft:#3c3e44;
    --line:#3c3e44; --line-hover:var(--gray-600);
    --hover:#3b3d43; --skeleton:var(--gray-800);
    --focus:var(--orange-500); --accent-deep:var(--orange-500);
    --match:var(--orange-500);
    --step-tint:rgba(255,142,10,.10);
    --input-bg:#2b2c31; --input-border:var(--gray-700);
    --btn-primary-bg:var(--gray-950); --btn-primary-text:var(--white); --btn-primary-border:rgba(255,255,255,.2);
    --toast-bg:var(--gray-900); --toast-text:var(--gray-100); --toast-border:rgba(255,255,255,.2);
    --amber-bg:#3a331f; --amber-border:#5a4c26; --amber-text:#e6b566; --amber-dot:#d99a3d;
    --green-bg:#243428; --green-border:#38543f; --green-text:#84c795;
    --red-bg:#3d2723; --red-border:#5c352e; --red-text:#e28d7f;
    --blue-bg:#2b323c; --blue-border:#3e4a59; --blue-text:#a5b8cd;
    --neutral-bg:#3b3d43; --neutral-border:#4c505a; --neutral-text:var(--gray-300);
    --ok-dot:#4cbf6a;
  }
}
/* dark — the toggle wins over a light system */
:root[data-theme="dark"]{
  --bg:var(--gray-950); --surface:var(--gray-900);
  --topbar:var(--gray-900); --topbar-rule:var(--gray-800);
  --topbar-text:var(--white); --topbar-text-2:var(--gray-300);
  --text:var(--gray-100); --text-2:var(--gray-300); --text-3:var(--gray-300);
  --rule:var(--gray-800); --rule-soft:#3c3e44;
  --line:#3c3e44; --line-hover:var(--gray-600);
  --hover:#3b3d43; --skeleton:var(--gray-800);
  --focus:var(--orange-500); --accent-deep:var(--orange-500);
  --match:var(--orange-500);
  --step-tint:rgba(255,142,10,.10);
  --input-bg:#2b2c31; --input-border:var(--gray-700);
  --btn-primary-bg:var(--gray-950); --btn-primary-text:var(--white); --btn-primary-border:rgba(255,255,255,.2);
  --toast-bg:var(--gray-900); --toast-text:var(--gray-100); --toast-border:rgba(255,255,255,.2);
  --amber-bg:#3a331f; --amber-border:#5a4c26; --amber-text:#e6b566; --amber-dot:#d99a3d;
  --green-bg:#243428; --green-border:#38543f; --green-text:#84c795;
  --red-bg:#3d2723; --red-border:#5c352e; --red-text:#e28d7f;
  --blue-bg:#2b323c; --blue-border:#3e4a59; --blue-text:#a5b8cd;
  --neutral-bg:#3b3d43; --neutral-border:#4c505a; --neutral-text:var(--gray-300);
  --ok-dot:#4cbf6a;
}