/* SyRF Redesign tokens
   Built on Angular Material 3 — every var maps to an M3 token or sys role. */

:root, .light {
  /* Brand — SyRF navy */
  --brand-ink: #1c3053;
  --brand-ink-hover: #243c67;
  --brand-ink-soft: #e8ecf4;

  /* Accent — SyRF M3 primary tone 40 (buttons, tabs, links) */
  --accent: #4b5e84;
  --accent-hover: #415270;
  --accent-soft: #eaecf2;

  /* Cool neutral surfaces (SyRF M3 light) */
  --bg: #fdfcff;             /* page */
  --surface: #ffffff;        /* cards */
  --surface-sunken: #f3f3fa; /* rails, search, sections */
  --surface-raised: #ffffff;
  --divider: #e1e2ec;
  --divider-soft: #eceef5;

  /* Text */
  --ink: #1a1c1e;
  --ink-2: #393b42;          /* body (SyRF on-surface-variant) */
  --ink-3: #5a5d66;          /* meta */
  --ink-4: #8f939c;          /* disabled/hint */

  /* Semantic — SyRF tokens */
  --ok: #388e3c;
  --ok-soft: #e8f5e9;
  --warn: #e65100;
  --warn-soft: #fff3e0;
  --err: #d32f2f;
  --err-soft: #ffebee;
  --info: #1976d2;
  --info-soft: #e3f2fd;

  /* Progress */
  --prog-done: #2e7d32;
  --prog-active: #6a3069;
  --prog-pending: #4b5e84;
  --prog-empty: #e1e2ec;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  /* Elevation (tonal, not shadow-heavy) */
  --el-1: 0 1px 2px rgba(28,48,83,.06), 0 1px 3px rgba(28,48,83,.04);
  --el-2: 0 2px 8px rgba(28,48,83,.08), 0 1px 3px rgba(28,48,83,.05);
  --el-3: 0 8px 24px rgba(28,48,83,.10), 0 2px 6px rgba(28,48,83,.06);
  --ring: 0 0 0 3px rgba(75,94,132,.28);

  /* Type */
  --f-sans: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --f-serif: 'Source Serif 4', 'Lora', Georgia, serif;
  --f-mono: 'Roboto Mono', ui-monospace, Consolas, monospace;
}

.dark {
  --brand-ink: #dfe6f2;
  --brand-ink-hover: #ffffff;
  --brand-ink-soft: #24334f;

  --accent: #a8b8d8;
  --accent-hover: #c0cde4;
  --accent-soft: #222a3d;

  --bg: #14171c;
  --surface: #1c2026;
  --surface-sunken: #171a20;
  --surface-raised: #232830;
  --divider: #2d3340;
  --divider-soft: #242934;

  --ink: #ebeaea;
  --ink-2: #c8c9cd;
  --ink-3: #9097a1;
  --ink-4: #6c737e;

  --ok: #7fbe72;
  --ok-soft: #1f2e1f;
  --warn: #e6a864;
  --warn-soft: #33261a;
  --err: #e88073;
  --err-soft: #331e1a;
  --info: #7fb0e4;
  --info-soft: #172330;

  --prog-done: #7fbe72;
  --prog-active: #c090c0;
  --prog-pending: #8a7a5a;
  --prog-empty: #2d3340;

  --el-1: 0 1px 2px rgba(0,0,0,.3);
  --el-2: 0 2px 10px rgba(0,0,0,.4);
  --el-3: 0 8px 28px rgba(0,0,0,.5);
  --ring: 0 0 0 3px rgba(168,184,216,.35);
}

/* Base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--f-sans);
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
h1,h2,h3,h4,h5,h6 { color: var(--ink); margin: 0; font-weight: 500; letter-spacing: -0.01em; }

/* Page header */
.ph { margin-bottom: 22px; }
.ph-crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); margin-bottom: 10px; }
.ph-crumbs a { color: var(--ink-3); cursor: pointer; }
.ph-crumbs a:hover { color: var(--ink-2); }
.ph-crumbs .ms { font-size: 14px; color: var(--ink-4, var(--ink-3)); }
.ph-crumbs > span:last-child { color: var(--ink); }
.ph-row { display: flex; align-items: flex-start; gap: 24px; justify-content: space-between; }
.ph-title-block { flex: 1; min-width: 0; max-width: 820px; }
.ph-title-quiet {
  font-family: var(--f-serif);
  font-size: 26px;
  line-height: 1.22;
  font-weight: 500;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.subtitle-quiet { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.ph-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ph-actions-quiet { gap: 12px; }
.ph-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--warn-bg, #fef3c7); color: var(--warn-ink, #92400e); font-size: 12px; font-weight: 500; }
.ph-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ph-nav { display: inline-flex; gap: 6px; }
.ph-iconbtn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--divider); border-radius: 8px; color: var(--ink-2); cursor: pointer; }
.ph-iconbtn:hover { background: var(--surface-2, var(--surface)); }

/* Material symbols */
.ms {
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}
.ms.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }