/* FootageDrop design tokens, from the FootageDrop Brand + UI guidelines (page 10).
   Warm neutrals do most of the work; three accents (Rust, Butter, Sage)
   appear as large flat blocks. Rust is for action, Butter for money and
   storage, Sage for review and sharing. */

/* Bricolage Grotesque, bundled so the app works offline (variable: wght, opsz). */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("BricolageGrotesque.413e735780.ttf") format("truetype");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: block;
}

:root {
  color-scheme: light;

  /* neutrals */
  --ink: #1D1B18; --ink-2: #2A2723; --ink-3: #3A3631;
  --cream: #F4EFE6; --sand: #E7E0D4; --linen: #EFE9DF;
  --desk: #E4DDD1; --white: #FFFFFF;
  /* accents */
  --rust: #B5522B; --rust-deep: #8E3F1F;
  --butter: #F2D58A; --sage: #CFE0C8; --clay: #E9C3B1;
  --moss: #6E9A63;
  /* text */
  --text: #1D1B18; --text-2: #5E574D; --text-muted: #8A8276;
  --text-on-dark: #E9E4DC; --text-on-dark-2: #CFC8BD; --muted-on-dark: #8F887E;
  --text-on-butter: #4A3B10; --text-on-sage: #2E4626; --text-on-rust: #FBE9E0;
  --disabled-text: #A89F92;
  /* type */
  --font-display: "Bricolage Grotesque", sans-serif; /* 700, 800 */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif;
  --title: 64px; --numeral: 72px; --stat: 26px; --tile-title: 24px; --section: 22px;
  --body: 14px; --button: 13px; --meta: 12.5px; --label: 11px;
  /* shape */
  --r-pill: 999px; --r-xl: 20px; --r-lg: 14px; --r-md: 10px; --r-sm: 7px;
  --space-1: 4px; --space-2: 8px; --space-3: 14px; --space-4: 22px; --space-5: 40px;
  --sidebar: 236px; --content-max: 900px;

  /* Semantic layer: what the UI uses. These swap for dark mode; the
     brand colours above never change. */
  --bg: var(--cream);
  --card: var(--white);
  --field: var(--white);
  --fill: var(--sand);          /* chips, muted buttons, segmented controls */
  --track: var(--linen);        /* progress tracks, placeholders, row dividers */
  --line: var(--desk);          /* the few hairlines left: fields, drop zones */
  --hover: rgba(29, 27, 24, .05);
  --side-bg: var(--ink);
  --side-raised: var(--ink-2);
  --btn-ink: var(--ink); --btn-ink-text: #FFFFFF;   /* Ink buttons, bubbles, toast */
  --on-rust: #FFFFFF;
  --rust-tint: #F6E3D9;
  --link: var(--rust); --link-hover: var(--rust-deep);
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Status: fg = text, bg = chip, bar = progress fill */
  --uploading-fg: var(--rust-deep); --uploading-bg: var(--rust-tint); --uploading-bar: var(--rust);
  --verified-fg: #3F6B35;  --verified-bg: var(--sage);  --verified-bar: var(--moss);
  --paused-fg: var(--text-2); --paused-bg: var(--sand); --paused-bar: var(--disabled-text);
  --warning-fg: var(--text-on-butter); --warning-bg: var(--butter);
  --error-fg: var(--rust-deep); --error-bg: var(--rust-tint); --error-bar: var(--rust-deep);
  --info-fg: var(--text-on-sage); --info-bg: var(--sage);

  /* Brand mark */
  --mark-plate: var(--rust);
  --mark-sender: var(--cream);
  --mark-receiver: var(--butter);
}

/* Dark: the guidelines are light-only, so this is the same palette turned
   round: Ink backgrounds, Ink 2 cards, the same accents, light text. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--ink); --card: var(--ink-2); --field: var(--ink-2); --fill: var(--ink-3); --track: var(--ink-3); --line: #4A453E;
    --hover: rgba(255, 255, 255, .06); --side-bg: #141311; --side-raised: var(--ink-2);
    --text: #E9E4DC; --text-2: #CFC8BD; --text-muted: #8F887E; --disabled-text: #6F685F;
    --btn-ink: #E9E4DC; --btn-ink-text: var(--ink);
    --rust-tint: #4A2A1C; --link: #E08A62; --link-hover: #F0B79B;
    --uploading-fg: #F0B79B; --uploading-bg: #4A2A1C;
    --verified-fg: #B9D3AE; --verified-bg: #2F3D2B;
    --paused-fg: #CFC8BD; --paused-bg: var(--ink-3);
    --warning-fg: var(--butter); --warning-bg: #4A3F1E;
    --error-fg: #F0B79B; --error-bg: #4A2A1C; --error-bar: #E08A62;
    --info-fg: var(--sage); --info-bg: #2F3D2B;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--ink); --card: var(--ink-2); --field: var(--ink-2); --fill: var(--ink-3); --track: var(--ink-3); --line: #4A453E;
  --hover: rgba(255, 255, 255, .06); --side-bg: #141311; --side-raised: var(--ink-2);
  --text: #E9E4DC; --text-2: #CFC8BD; --text-muted: #8F887E; --disabled-text: #6F685F;
  --btn-ink: #E9E4DC; --btn-ink-text: var(--ink);
  --rust-tint: #4A2A1C; --link: #E08A62; --link-hover: #F0B79B;
  --uploading-fg: #F0B79B; --uploading-bg: #4A2A1C;
  --verified-fg: #B9D3AE; --verified-bg: #2F3D2B;
  --paused-fg: #CFC8BD; --paused-bg: var(--ink-3);
  --warning-fg: var(--butter); --warning-bg: #4A3F1E;
  --error-fg: #F0B79B; --error-bg: #4A2A1C; --error-bar: #E08A62;
  --info-fg: var(--sage); --info-bg: #2F3D2B;
}

.tabular { font-variant-numeric: tabular-nums; }
.label { font-size: var(--label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }