/* Shardflux design tokens. Source of truth for web and app UI.
   Rules for using them: docs/DESIGN_SYSTEM.md. Values match the approved landing page (v2).
   Dark is the primary theme. The light theme exists for the app (settings, docs, invoices) and printouts. */

@import url("https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..700&family=Funnel+Sans:wght@400..600&family=Fragment+Mono&display=swap");

:root {
  color-scheme: dark;

  /* surfaces */
  --sf-bg: #0A0A0B;            /* page */
  --sf-raise: #111113;         /* panels, code, windows */
  --sf-overlay: #1B1C1F;       /* menus, popovers, tooltips */

  /* app top bar: the one light surface in the dark app (marketing nav stays dark) */
  --sf-bar-bg: #F6F4F0;
  --sf-bar-ink: #15161A;
  --sf-bar-muted: #5B6068;
  --sf-bar-line: rgba(21, 22, 26, .10);
  --sf-bar-active: rgba(21, 22, 26, .07);

  /* glass: summary cards at the top of app pages only (dark theme) */
  --sf-glass-fill: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .018) 55%, rgba(255, 255, 255, .03));
  --sf-glass-edge: linear-gradient(140deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .05) 38%, rgba(255, 255, 255, .02) 62%, rgba(255, 255, 255, .16));
  --sf-glass-blur: blur(22px) saturate(170%);
  --sf-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(255, 255, 255, .035), 0 24px 48px -28px rgba(0, 0, 0, .9);
  --sf-glass-glow-cold: #6FB4F0;

  /* text */
  --sf-ink: #EDEBE7;           /* primary text, primary button fill */
  --sf-muted: #8B8F96;         /* secondary text, body copy on marketing */
  --sf-dim: #5D6168;           /* labels, table headers, disabled */

  /* lines */
  --sf-line: rgba(237, 235, 231, .09);   /* dividers, row rules */
  --sf-line-2: rgba(237, 235, 231, .16); /* panel borders, inputs, ghost buttons */
  --sf-line-3: rgba(237, 235, 231, .34); /* hover on bordered controls */

  /* the one accent: molten amber. Means "running" and marks the single most important number */
  --sf-molten: #FF8A3D;

  /* workspace state (text colours; see the state rules) */
  --sf-state-running: var(--sf-molten);
  --sf-state-paused: var(--sf-ink);
  --sf-state-archived: var(--sf-dim);
  --sf-state-starting: var(--sf-muted);

  /* shard glyph fills for the same states (the glyph needs more contrast steps than text) */
  --sf-glyph-running: var(--sf-molten);
  --sf-glyph-paused: rgba(237, 235, 231, .55);
  --sf-glyph-archived: rgba(237, 235, 231, .16);

  /* feedback. Never reuse amber for warnings: amber means running */
  --sf-success: #7BC68A;
  --sf-warning: #E9C46A;
  --sf-danger: #F0645A;

  /* code syntax (inside --sf-raise windows only) */
  --sf-code-keyword: #C6A6F2;
  --sf-code-string: #9FD39A;
  --sf-code-call: #F2C08A;
  --sf-code-comment: #5D6168;
  --sf-code-line-number: #3E4147;

  /* type */
  --sf-display: "Funnel Display", system-ui, sans-serif;
  --sf-body: "Funnel Sans", system-ui, sans-serif;
  --sf-mono: "Fragment Mono", ui-monospace, Menlo, monospace;

  /* type scale (px). App UI lives at 13-15; marketing uses the top of the scale */
  --sf-text-11: 11px;  /* uppercase mono labels only */
  --sf-text-12: 12.5px;/* table headers, captions */
  --sf-text-13: 13px;  /* mono data, small UI */
  --sf-text-14: 14px;  /* app body, buttons, nav */
  --sf-text-15: 15px;  /* table cells, descriptions */
  --sf-text-17: 17px;  /* marketing body */
  --sf-text-20: 20px;  /* card and dialog titles */
  --sf-text-26: 26px;  /* app page titles */
  --sf-text-44: 44px;  /* big numbers */
  --sf-text-52: 52px;  /* marketing section headings */
  --sf-text-72: 72px;  /* marketing hero only */

  /* spacing: 4 px base */
  --sf-1: 4px; --sf-2: 8px; --sf-3: 12px; --sf-4: 16px; --sf-5: 20px; --sf-6: 24px;
  --sf-8: 32px; --sf-10: 40px; --sf-12: 48px; --sf-16: 64px; --sf-24: 96px; --sf-35: 140px;

  /* radii */
  --sf-radius-sm: 4px;   /* chips, code inline */
  --sf-radius: 6px;      /* buttons, inputs, tabs */
  --sf-radius-lg: 12px;  /* panels, windows, dialogs */
  --sf-radius-glass: 16px; /* summary cards */

  /* layout */
  --sf-max: 1200px;
  --sf-gutter: clamp(20px, 4vw, 48px);
  --sf-header: 64px;

  /* motion */
  --sf-ease-out: cubic-bezier(.2, .8, .2, 1);
  --sf-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --sf-fast: 150ms;
  --sf-base: 250ms;
  --sf-slow: 600ms;
}

/* Light theme: app surfaces only (never the marketing site). Same roles, bone paper. */
:root[data-theme="light"] {
  color-scheme: light;
  --sf-bg: #EDEBE7;
  --sf-raise: #F6F4F0;
  --sf-overlay: #FFFFFF;
  --sf-ink: #15161A;
  --sf-muted: #5B6068;
  --sf-dim: #8A8E94;
  --sf-line: rgba(21, 22, 26, .10);
  --sf-line-2: rgba(21, 22, 26, .18);
  --sf-line-3: rgba(21, 22, 26, .36);
  --sf-molten: #D2691E;          /* darker amber keeps contrast on bone */
  --sf-glyph-paused: rgba(21, 22, 26, .55);
  --sf-glyph-archived: rgba(21, 22, 26, .16);
  --sf-success: #2F8A4A;
  --sf-warning: #9A7209;
  --sf-danger: #C8372D;
}

@media (prefers-reduced-motion: reduce) {
  :root { --sf-fast: 0ms; --sf-base: 0ms; --sf-slow: 0ms; }
}

/* Summary card. Markup: <div class="sf-glass"> title, figure, bar, context line </div>.
   Put the blurred state glows behind the row, not inside the card. */
.sf-glass {
  position: relative; overflow: hidden;
  padding: 20px 22px 22px; border-radius: var(--sf-radius-glass);
  display: flex; flex-direction: column; gap: 8px;
  background: var(--sf-glass-fill);
  -webkit-backdrop-filter: var(--sf-glass-blur); backdrop-filter: var(--sf-glass-blur);
  box-shadow: var(--sf-glass-shadow);
}
.sf-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--sf-glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.sf-glass::after {
  content: ""; position: absolute; left: -20%; top: -60%; width: 90%; height: 120%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .07), transparent); transform: rotate(-12deg);
}
.sf-glass > * { position: relative; z-index: 1; }