/**
 * CSS variables — theme hooks.
 *
 * Consumer overrides by setting `--fe-*` on a higher scope.
 */

/* A host contract, not a colour: where every window-sized layer the explorer
 * draws BEGINS (dialogs, scrims, the notification list — base.css
 * `.fe-modal__backdrop` says why). A host with a bar of its own at the top of
 * the window — the desktop app's title bar — sets it to that bar's height.
 * ⚠ `:where()`: zero specificity, so a host's `:root { --fe-overlay-top }`
 * wins whichever stylesheet loads first; and on `:root`, never on `.fe`,
 * because the backdrops carry `.fe` and a value there would shadow the
 * host's.
 * `--fe-overlay-bottom` is the same contract for a strip at the BOTTOM of the
 * window, and only the full-window viewer (Modal `chromeless`) keeps clear of
 * it: the desktop's "editing a copy" note under an open-with document, which
 * would otherwise cover the viewer's own bottom row (a spreadsheet's sheet
 * tabs). A centred dialog never reaches the bottom edge, so nothing else
 * reads it. */
:where(:root) {
  --fe-overlay-top: 0px;
  --fe-overlay-bottom: 0px;
}

:root {
  /* gorunum:v1 — the product's own palette and metrics. Everything below is a
   * measured value, not a taste: the type scale, the control heights and the
   * radii were read off the shell this look follows, in a real browser at
   * 1440, and the palette clears the contrast bar in
   * web/tests/api/themeContrast.test.ts in both variants. */
  --fe-bg: #ffffff;
  --fe-bg-elev: #f7f8fb;
  --fe-bg-hover: #f3f4f6;
  --fe-bg-selected: #eef3ff;
  --fe-border: #e5e7eb;
  --fe-border-soft: #eef0f4;
  --fe-border-strong: #d1d5db;
  --fe-text: #1f2937;
  --fe-text-muted: #6b7280;
  --fe-text-on-primary: #ffffff;
  --fe-primary: #2f6ceb;
  --fe-primary-hover: #2559c9;
  --fe-primary-soft: #e6ecfa;
  /* Ink for text and icons ON the soft-primary ground — the active sidebar
     row, the active scope tab, the active segment of a segmented control.
     ⚠ It is a token of its own because `--fe-primary` cannot carry that job:
     measured, the stock primary on the stock tint is 3.97:1, under the 4.5 the
     palette file claims, and no tint rescues it (the primary is only 4.70:1 on
     white to begin with). It is not `--fe-primary-hover` either, though that is
     the value HERE: three of the shipped palettes darken their hover in dark
     mode, toward the tint rather than away from it, and Night dark measures
     3.78:1 that way. Each palette names the ink that clears the bar on its own
     tint; web/tests/api/themeContrast.test.ts pins the pairing. */
  --fe-primary-ink: #2559c9;
  --fe-danger: #dc2626;
  --fe-danger-hover: #b91c1c;
  --fe-keep-ok: #16a34a; /* selective-sync "on this computer" check */
  --fe-shadow: 0 20px 60px rgba(17, 24, 39, 0.18);
  --fe-shadow-sm: 0 8px 24px rgba(17, 24, 39, 0.12);
  --fe-radius: 8px;
  --fe-radius-sm: 6px;
  --fe-radius-md: 10px;
  --fe-radius-lg: 12px;
  /* Control heights. A listing is a stack of rows and chips; when each one
   * picks its own height the column edges wander and the page reads as
   * hand-assembled. Three sizes, and every control picks one. */
  --fe-h-sm: 28px;
  --fe-h-md: 34px;
  --fe-h-lg: 40px;
  /* gorunum:v3-shell — the navigation panel's expanded width. A token because
   * TWO places have to agree on it: the panel itself, and the gutter the top
   * bar reserves at its left so the search field starts where the content
   * area does. Written once in each place, they were one redesign away from
   * disagreeing — and the failure is silent, a header that no longer lines up
   * with the column under it.
   * ⚠ The rail and the drawer keep their own widths; only the expanded column
   * follows this.
   * ⚠ 192px, not 255px (owner, 2026-09-13: "şu an default'ta çok açık geliyor
   * yan menü, biraz kısaltabiliriz bence"). It is the reference build's own
   * number, measured off it at 1280, and it is the WHOLE change: the top bar's
   * gutter is `calc(this - 12px)`, so the search field moves left with the
   * column instead of the header drifting out of line with it. Checked at the
   * new width in Turkish, the longer of the two catalogues — the widest row
   * label ("Paylaşılanlar") clears it, and so does the quota line. */
  --fe-sidenav-w: 192px;
  /* The list view's FROZEN LEAD — how far from the pane's left edge the Name
   * column's sticky offset sits, i.e. the width of the tick's track plus the
   * gap after it. Declared here because it is a real default and because a
   * `--fe-*` nobody declares is a name nobody can find (web/tests/api/
   * themeTokens.test.ts), even though ListView writes the exact number inline:
   * only the component knows the tick's track, and it recomputes it whenever
   * the metrics change. */
  --fe-list-lead: calc(var(--fe-h-sm) + var(--fe-gap) + var(--fe-gap-sm));
  /* Type scale. Small and tight on purpose: the shell packs a filename, a
   * size, a date and a menu into one row, and 14px with normal leading pushes
   * that to two lines at any realistic column width. */
  --fe-text-xs: 12px;
  --fe-text-sm: 12.5px;
  --fe-text-md: 13px;
  --fe-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fe-font-mono: ui-monospace, "SF Mono", Consolas, Menlo, monospace;
  --fe-gap-xs: 4px;
  --fe-gap-sm: 8px;
  --fe-gap: 12px;
  --fe-gap-lg: 16px;
  /* The viewer's edge chevrons: their size and their distance from the edge.
   * The chevrons and the gutter a filled stage keeps for them
   * (`.fe-viewer__stage--gutter`) both read these two, so they cannot
   * disagree; `.fe-viewer` sets them smaller on a narrow screen. */
  --fe-viewer-chev-size: var(--fe-h-lg);
  --fe-viewer-chev-inset: var(--fe-gap);
}

.fe--theme-dark,
:root[data-theme='dark'] .fe,
.fe.fe--theme-dark,
/* Tailwind dark-mode class shipped by the host admin shell —
 * web/src/lib/theme.ts toggles document.documentElement.classList
 * .toggle('dark', dark), so we adopt the same hook here. Without
 * this selector the embedded explorer stayed on the :root light
 * defaults even when the rest of the admin UI flipped dark.
 *
 * The bare `:root.dark` / `.dark` selectors (no `.fe` descendant)
 * also publish the variables at the html-level so non-SFC consumers —
 * the standalone /files/edit Editor.vue route, which doesn't wrap its
 * host div in `.fe` — pick up the dark palette via CSS-variable
 * cascade. v0.1.11 added the bare selectors after operators reported
 * the new tab opening light when the admin panel was dark. */
:root.dark,
.dark,
:root.dark .fe,
.dark .fe,
/* Teleported context menu lives outside the `.fe` parent, so we have
 * to apply the same dark-mode variable overrides on its backdrop too —
 * otherwise it stays on the :root light defaults and the menu renders
 * as white-on-white inside dark hosts. */
.fe-ctx-backdrop--theme-dark,
.fe-ctx-backdrop--theme-auto[data-prefers-dark='1'] {
  --fe-bg: #15171c;
  --fe-bg-elev: #1a1d23;
  --fe-bg-hover: #1f232a;
  --fe-bg-selected: #1c2740;
  --fe-border: #2e333c;
  --fe-border-soft: #262a32;
  --fe-border-strong: #3d444f;
  --fe-text: #e6e8ec;
  --fe-text-muted: #888f9b;
  /* Dark ink on the light-blue button. White measures 3.16:1 against it —
   * the bar for text on a primary surface is 4.5, and #15171c measures 5.67. */
  --fe-text-on-primary: #15171c;
  --fe-primary: #5b8cff;
  --fe-primary-hover: #7ba3ff;
  --fe-primary-soft: #1c2740;
  --fe-primary-ink: #7ba3ff;
  --fe-danger: #f87171;
  --fe-danger-hover: #ef4444;
    --fe-keep-ok: #4ade80;
  --fe-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  --fe-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.25);
}

@media (prefers-color-scheme: dark) {
  .fe:not(.fe--theme-light),
  /* Same trick for the teleported backdrop in auto mode. */
  .fe-ctx-backdrop--theme-auto:not(.fe-ctx-backdrop--theme-light) {
    --fe-bg: #15171c;
    --fe-bg-elev: #1a1d23;
    --fe-bg-hover: #1f232a;
    --fe-bg-selected: #1c2740;
    --fe-border: #2e333c;
    --fe-border-soft: #262a32;
    --fe-border-strong: #3d444f;
    --fe-text: #e6e8ec;
    --fe-text-muted: #888f9b;
    /* See the note on the class-based dark block above. */
    --fe-text-on-primary: #15171c;
    --fe-primary: #5b8cff;
    --fe-primary-hover: #7ba3ff;
    --fe-primary-soft: #1c2740;
    --fe-primary-ink: #7ba3ff;
    --fe-danger: #f87171;
    --fe-danger-hover: #ef4444;
    --fe-keep-ok: #4ade80;
    --fe-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    --fe-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.25);
  }
}

/* === cila:a — file-type icon accent tokens (lib/fileIcons families) === */
:root {
  /* gorunum:v1 — the folder yellow, same value in both variants. A folder is
   * the only glyph that is filled, and the one people find by colour before
   * they read the name; darkening it for the light theme made it read as an
   * archive box. */
  --fe-icon-folder: #f4b400;
  /* gorunum:v1 — these are now the fill of a chip, not the stroke of a glyph,
   * so they are read as a block of colour and a family has to be one glance
   * apart from its neighbours. Documents and code share the blue on purpose:
   * both are "something you open and read", and splitting them made every
   * listing look like a paint chart. */
  --fe-icon-image: #2f6ceb;
  --fe-icon-video: #7c3aed;
  --fe-icon-audio: #0d9488;
  --fe-icon-pdf: #dc2626;
  --fe-icon-doc: #2f6ceb;
  --fe-icon-sheet: #16a34a;
  --fe-icon-slides: #ea580c;
  --fe-icon-archive: #6b7280;
  --fe-icon-code: #2f6ceb;
  --fe-icon-text: #374151;
  --fe-icon-unknown: #6b7280;
  /* Not file types: the two rows that are PLACES. A drive is infrastructure
   * rather than content, so it takes a slate that sits beside the type
   * colours without competing with any of them — it is the first thing on the
   * multi-storage root and should read as a shelf, not as another document.
   * The bin is deliberately the quietest chip in the set. */
  --fe-icon-storage: #475569;
  --fe-icon-trash: #6b7280;
}

/* Dark values — same selector strategy as the palette blocks above. */
.fe--theme-dark,
:root[data-theme='dark'] .fe,
.fe.fe--theme-dark,
:root.dark,
.dark,
:root.dark .fe,
.dark .fe,
.fe-ctx-backdrop--theme-dark,
.fe-ctx-backdrop--theme-auto[data-prefers-dark='1'] {
  --fe-icon-folder: #fbbf24;
  --fe-icon-image: #4d7ff0;
  --fe-icon-video: #9061f0;
  --fe-icon-audio: #2dd4bf;
  --fe-icon-pdf: #e05252;
  --fe-icon-doc: #4d7ff0;
  --fe-icon-sheet: #2eab63;
  --fe-icon-slides: #fb923c;
  --fe-icon-archive: #79808d;
  --fe-icon-code: #4d7ff0;
  --fe-icon-text: #5b6472;
  --fe-icon-unknown: #79808d;
  --fe-icon-storage: #8b95a6;
  --fe-icon-trash: #79808d;
}

@media (prefers-color-scheme: dark) {
  .fe:not(.fe--theme-light),
  .fe-ctx-backdrop--theme-auto:not(.fe-ctx-backdrop--theme-light) {
    --fe-icon-folder: #f4b400;
    --fe-icon-image: #4d7ff0;
    --fe-icon-video: #9061f0;
    --fe-icon-audio: #2dd4bf;
    --fe-icon-pdf: #e05252;
    --fe-icon-doc: #4d7ff0;
    --fe-icon-sheet: #2eab63;
    --fe-icon-slides: #fb923c;
    --fe-icon-archive: #79808d;
    --fe-icon-code: #4d7ff0;
    --fe-icon-text: #5b6472;
    --fe-icon-unknown: #79808d;
    --fe-icon-storage: #8b95a6;
    --fe-icon-trash: #79808d;
  }
}

/* === cila:b — status tokens === */
/* Amber status accent (connection badge dot; StarButton already referenced it
   via var(--fe-warning, #f59e0b)). Declared with the SAME value the fallbacks
   used, and identical in light + dark on purpose — amber reads well on both
   palettes, so making the token official changes nothing visually. */
:root,
.fe--theme-dark,
:root.dark,
.dark {
  --fe-warning: #f59e0b;
  /* Green status accent (sync "ok" states, the connections test result). Same
     value the inline fallbacks carried, identical in light + dark — declaring
     it changes nothing visually, it only makes the token real. */
  --fe-ok: #16a34a;
}

/* === The outward-facing page's own ground and card =====================
 * The public shell (`/s/`, `/d/`, an app's public page) does NOT paint with
 * `--fe-bg` / `--fe-bg-elev`: in the app those two mean "surface" and
 * "sunken strip", and a card on a page has to sit ABOVE its ground, not
 * below it. Drawing the card in `--fe-bg-elev` on `--fe-bg` is exactly what
 * made the v0.43.0 public page look like no page at all.
 *
 * The values are the Go-rendered page's own, up to v0.42.2 (`--px-bg1`,
 * `--px-bg2`, `--px-card`, `--px-shadow`).
 *
 * ⚠ Declared HERE, in both variants, and not beside the rules that use them:
 * web/tests/api/themeTokens.test.ts reads this file alone, and a `--fe-*`
 * declared anywhere else is a phantom token to every other reader. */
.fe.fe-ppage {
  --fe-ppage-ground-1: #f5f7fb;
  --fe-ppage-ground-2: #e9edf4;
  --fe-ppage-card: #ffffff;
  --fe-ppage-shadow: 0 12px 40px rgba(15, 23, 42, 0.1);
  --fe-ppage-ok: var(--fe-ok);
  /* The card's width, set by the shell's `layout` (lib/publicLayout):
     the gate's 400px here, 520 and 880 below. */
  --fe-ppage-max: 400px;
}
.fe.fe-ppage.fe--theme-dark,
:root[data-theme='dark'] .fe.fe-ppage,
:root.dark .fe.fe-ppage,
.dark .fe.fe-ppage {
  --fe-ppage-ground-1: #12151a;
  --fe-ppage-ground-2: #191e25;
  --fe-ppage-card: #1f242c;
  --fe-ppage-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --fe-ppage-ok: #22c55e;
}
@media (prefers-color-scheme: dark) {
  .fe.fe-ppage:not(.fe--theme-light) {
    --fe-ppage-ground-1: #12151a;
    --fe-ppage-ground-2: #191e25;
    --fe-ppage-card: #1f242c;
    --fe-ppage-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    --fe-ppage-ok: #22c55e;
  }
}
/* ⚠ `.fe.` on purpose: `.fe.fe-ppage` above is (0,2,0), so a single-class
   modifier LOSES to it and every card came out at the gate's 400px —
   measured on the folder and the signing page at 1440. */
.fe.fe-ppage--form {
  --fe-ppage-max: 520px;
}
.fe.fe-ppage--wide {
  --fe-ppage-max: 880px;
}
/* ⚠ #74 - a THEME may define the three above for itself (its light and dark
 * maps carry `--fe-ppage-ground-1`, `-ground-2`, `-card`); the stock values
 * above are the default theme's own definition, and a theme that defines
 * none gets them worked out from its own palette (lib/themes
 * `publicPageTokens`, written by `generateThemeCss` under these same
 * selectors). Without that, an operator theme painted the page's text and
 * buttons and left these greys under them. */

/* === The sign-in page's ground and card ================================
 * The sign-in page (web Login.vue) is the other outward-facing page, so a
 * theme may define it too. Unlike the share page it has always been painted
 * from the palette - the sunken ground, the surface card - so the defaults
 * ARE the palette's tokens, and a theme that defines nothing keeps exactly
 * what it had. Declared on `:root`, where a theme's own values land. */
:root {
  --fe-login-ground: var(--fe-bg-elev);
  --fe-login-card: var(--fe-bg);
}