/* =============================================================
   LNG Shipper Dashboard — Design Tokens
   Light-first · Gulf brand (navy/teal) · IBM Plex + Prompt
   ============================================================= */
:root{
  --font-ui:'IBM Plex Sans','Prompt',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',monospace;
  --font-thai:'Prompt','IBM Plex Sans',sans-serif;

  --app-header-h:64px;
  --container-max:1680px;

  --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-xl:22px; --radius-pill:999px;

  --bg-page:#F4F6FA;
  --bg-glow:radial-gradient(1100px 520px at 88% -8%,rgba(16,112,90,.07),transparent 60%),
            radial-gradient(900px 480px at -8% 12%,rgba(0,61,91,.06),transparent 55%),
            radial-gradient(700px 420px at 55% 118%,rgba(59,130,246,.05),transparent 60%);
  --bg-surface:#FFFFFF;
  --bg-surface-2:#F7F9FC;
  --bg-hover:#F1F5FA;
  --bg-inset:#EDF1F7;
  --bg-table-head:#2C3A4B;
  --row-selected:#EAF5F1;

  --border-default:#E5EAF1;
  --border-strong:#D6DFEA;
  --border-subtle:#EEF1F6;

  --text-primary:#16283C;
  --text-body:#33455A;
  --text-secondary:#5F7189;
  --text-faint:#93A3B5;

  --accent-teal:#0F6F58;
  --accent-teal-hover:#0B5A47;
  --accent-teal-soft:rgba(15,111,88,.10);
  --accent-navy:#003D5B;
  --accent-navy-hover:#012C43;
  --accent-navy-soft:rgba(0,61,91,.10);
  --accent-blue:#3B82F6;
  --accent-violet:#8B5CF6;

  --color-green:#17A97B;  --color-green-soft:rgba(23,169,123,.13);
  --color-amber:#F5A623;  --color-amber-soft:rgba(245,166,35,.16);
  --color-red:#EF4444;    --color-red-soft:rgba(239,68,68,.11);
  --color-blue:#3B82F6;   --color-blue-soft:rgba(59,130,246,.12);
  --color-gray:#64748B;   --color-gray-soft:rgba(100,116,139,.14);

  --shadow-1:0 1px 2px rgba(16,42,71,.05),0 1px 3px rgba(16,42,71,.04);
  --shadow-2:0 4px 14px rgba(16,42,71,.08),0 2px 4px rgba(16,42,71,.04);
  --shadow-3:0 12px 34px rgba(16,42,71,.14);
  --shadow-pop:0 10px 30px rgba(9,20,35,.18);

  --edge:#C7D4E3;
  --glass:rgba(255,255,255,.78);
  --scrim:rgba(9,18,30,.46);

  --t-fast:140ms; --t:200ms; --t-slow:320ms;
  --ease:cubic-bezier(.4,0,.2,1);

  --z-rail:60; --z-scrim:65; --z-drawer:70; --z-pop:55; --z-palette:80; --z-toast:90;
}

[data-theme="dark"]{
  --bg-page:#0A111C;
  --bg-glow:radial-gradient(1100px 520px at 88% -8%,rgba(16,140,110,.10),transparent 60%),
            radial-gradient(900px 480px at -8% 12%,rgba(28,90,140,.13),transparent 55%);
  --bg-surface:#101A28;
  --bg-surface-2:#14202F;
  --bg-hover:#182636;
  --bg-inset:#0D1723;
  --bg-table-head:#182638;
  --row-selected:rgba(23,169,123,.10);

  --border-default:#1D2A3C;
  --border-strong:#27374C;
  --border-subtle:#16202F;

  --text-primary:#E8EFF7;
  --text-body:#C3D0DE;
  --text-secondary:#8DA0B5;
  --text-faint:#5F7488;

  --accent-teal:#2CB58E;
  --accent-teal-hover:#3FC9A2;
  --accent-teal-soft:rgba(44,181,142,.14);
  --accent-navy:#6FA8CC;
  --accent-navy-hover:#8FBCDA;
  --accent-navy-soft:rgba(111,168,204,.14);

  --color-green:#34D399;  --color-green-soft:rgba(52,211,153,.14);
  --color-amber:#FBBF24;  --color-amber-soft:rgba(251,191,36,.14);
  --color-red:#F87171;    --color-red-soft:rgba(248,113,113,.13);
  --color-blue:#60A5FA;   --color-blue-soft:rgba(96,165,250,.14);
  --color-gray:#94A3B8;   --color-gray-soft:rgba(148,163,184,.14);

  --shadow-1:0 1px 2px rgba(0,0,0,.35);
  --shadow-2:0 4px 14px rgba(0,0,0,.42);
  --shadow-3:0 12px 34px rgba(0,0,0,.5);
  --shadow-pop:0 10px 30px rgba(0,0,0,.55);

  --edge:#29405C;
  --glass:rgba(13,22,35,.72);
  --scrim:rgba(2,6,12,.6);
}

html.theme-anim, html.theme-anim body, html.theme-anim *{transition:background-color var(--t-slow) var(--ease),border-color var(--t-slow) var(--ease),color var(--t-slow) var(--ease),fill var(--t-slow) var(--ease),stroke var(--t-slow) var(--ease)!important}