/* FileShare UI · css/base.css · Fonts and design tokens. Loaded in the order listed in index.html. */
/* Fonts are bundled (vendor/fonts, Roboto, Apache-2.0) so FileShare works without internet. */
@font-face { font-family: "Roboto"; font-weight: 300; font-style: normal; font-display: swap; src: url("../vendor/fonts/roboto-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 400; font-style: normal; font-display: swap; src: url("../vendor/fonts/roboto-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-style: normal; font-display: swap; src: url("../vendor/fonts/roboto-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-style: normal; font-display: swap; src: url("../vendor/fonts/roboto-latin-700-normal.woff2") format("woff2"); }

/* FileShare prototype UI.
   Brand: deep teal with an amber "shared" accent. Workspace follows the familiar docEdge layout:
   folder tree, document grid, details panel, preview pane, yellow selection, colourful line icons. */

:root {
  --brand: #0F6E78;
  --brand-dark: #0B545C;
  --brand-deep: #0C3B40;
  --amber: #F2B84B;
  --btn: #0F6E78;
  --btn-dark: #0B545C;
  --ink: #1F2933;
  --muted: #66727F;
  --line: #D9DEE3;
  --line-soft: #ECEFF2;
  --panel: #F3F5F7;
  --grid-head: #E8ECEF;
  --select: #F6E75A;
  --select-soft: #FFF7BF;
  --hover: #F2F7FB;
  --welcome: #FFF8C4;
  --danger: #C0392B;

  --c-green: #1EA672; --c-teal: #129C9C; --c-red: #E0463A; --c-blue: #2F7FD0;
  --c-cyan: #16A3C4; --c-orange: #E08A1E; --c-purple: #7B5CC4; --c-navy: #2C4A7A; --c-gray: #7A8594;

  font-family: "Roboto", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: #fff; }
[hidden] { display: none !important; }
button { font: inherit; }
.muted { color: var(--muted); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.c-green { color: var(--c-green); } .c-teal { color: var(--c-teal); } .c-red { color: var(--c-red); }
.c-blue { color: var(--c-blue); } .c-cyan { color: var(--c-cyan); } .c-orange { color: var(--c-orange); }
.c-purple { color: var(--c-purple); } .c-navy { color: var(--c-navy); } .c-gray { color: var(--c-gray); }