@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&family=Roboto+Mono:wght@400;500&display=swap');@import url('https://fonts.googleapis.com/icon?family=Material+Icons');



/* ============================================================
   ActFact Design System — Foundations
   Platinum theme. Roboto type. Material Icons.
   ============================================================ */
@keyframes spin {
  to { transform: rotate(360deg); }
}
:root {
  /* ---------- Brand / Primary palette ---------- */
  --af-deepsea: #223469;   /* deep navy — dialog headers, primary brand */
  --af-liquid:  #25A8E0;   /* primary action / hover / focus */
  --af-sky:     #94D3EF;   /* tints, selected rows, soft highlights */

  /* ---------- Neutrals (greyscale) ---------- */
  --af-iron:     #696969;  /* default border, secondary text */
  --af-silver:   #BAB9B9;  /* default button fill, tertiary text */
  --af-mercury:  #E6E6E6;  /* dividers, subtle borders */
  --af-platinum: #F5F5F5;  /* main app background */
  --af-chrome:   #F7F7F7;  /* alt surface, zebra rows */
  --af-tin:      #FFFFFF;  /* overlays, headers, side menu, cards */

  /* ---------- Alert palette ---------- */
  --af-patina: #5CAF01;    /* success */
  --af-rust:   #D10720;    /* error / destructive */
  --af-brass:  #EF9500;    /* warning */
  --af-copper: #FF8A8A;    /* required-field accent */

  /* ---------- Semantic surfaces ---------- */
  --bg-app:        var(--af-platinum);
  --bg-surface:    var(--af-tin);
  --bg-overlay:    var(--af-tin);
  --bg-header:     var(--af-tin);
  --bg-side-menu:  var(--af-tin);
  --bg-alt:        var(--af-chrome);
  --bg-dialog-hd:  var(--af-deepsea);
  --bg-row-hover:  #F0F8FD;
  --bg-row-active: #E1F2FA;
  --bg-disabled:   var(--af-platinum);

  /* ---------- Semantic text ---------- */
  --fg-primary:    #1F1F1F;
  --fg-secondary:  var(--af-iron);
  --fg-tertiary:   var(--af-silver);
  --fg-on-dark:    var(--af-tin);
  --fg-link:       var(--af-liquid);
  --fg-link-hover: var(--af-deepsea);
  --fg-success:    var(--af-patina);
  --fg-error:      var(--af-rust);
  --fg-warning:    var(--af-brass);

  /* ---------- Borders ---------- */
  --border-default:  1px solid var(--af-iron);
  --border-active:   1px solid var(--af-liquid);
  --border-divider:  1px solid var(--af-mercury);
  --border-subtle:   1px solid var(--af-mercury);

  /* ---------- Radii ---------- */
  --radius-xs:   2px;
  --radius-sm:   3px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-pill: 999px;

  /* ---------- Spacing scale (4-px grid) ---------- */
  --space-1: 2px;   --space-2: 4px;   --space-3: 8px;
  --space-4: 12px;  --space-5: 16px;  --space-6: 20px;
  --space-7: 24px;  --space-8: 32px;  --space-9: 40px;
  --space-10: 48px;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 2px rgba(34, 52, 105, 0.06);
  --shadow-2: 0 2px 6px rgba(34, 52, 105, 0.10);
  --shadow-3: 0 6px 16px rgba(34, 52, 105, 0.14);
  --shadow-modal: 0 12px 40px rgba(34, 52, 105, 0.22);

  /* ---------- Motion ---------- */
  --ease-standard:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;

  /* ---------- Typography ---------- */
  --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --weight-light: 300; --weight-regular: 400; --weight-medium: 500;
  --fs-xxs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px;
  --fs-base: 14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 28px;
  --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.5; --lh-relaxed: 1.6;
  --tracking-tight: -0.01em; --tracking-caps: 0.06em;

  /* ---------- Z-index ---------- */
  --z-sticky: 10; --z-side-menu: 50; --z-dropdown: 100; --z-modal: 1000;
}
html { font-family: var(--font-sans); color: var(--fg-primary); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--weight-regular);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1 { font-family: var(--font-sans); font-weight: var(--weight-light); font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--af-deepsea); margin: 0; }
h2 { font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: var(--fs-2xl); color: var(--af-deepsea); margin: 0; }
a { color: var(--fg-link); text-decoration: none; }
a:hover { color: var(--fg-link-hover); text-decoration: underline; }
code, kbd, pre { font-family: var(--font-mono); font-size: var(--fs-sm); }
.material-icons.af-i-sm { font-size: 16px; }
.material-icons.af-i-md { font-size: 20px; }
.material-icons.af-i-lg { font-size: 24px; }