/* ==========================================================================
   Fluent 2 — design tokens
   Fonte: Microsoft Fluent 2 (Segoe UI Variable, Communication Blue #0F6CBD)
   Reimplementado em CSS puro — sem dependência de CDN.
   ========================================================================== */

@font-face {
  font-family: "Segoe UI Variable";
  src: local("Segoe UI Variable Text"), local("Segoe UI Variable"), local("Segoe UI");
  font-weight: 100 900;
}

:root {
  /* ---- brand ramp (verde Excel — #217346) ---- */
  --brand-shade-40: #041a0e;
  --brand-shade-30: #0a2e19;
  --brand-shade-20: #114325;
  --brand-shade-10: #185c30;
  --brand-primary:  #217346;
  --brand-tint-10:  #3d9163;
  --brand-tint-20:  #5fac80;
  --brand-tint-30:  #82c29c;
  --brand-tint-40:  #a6d6b8;
  --brand-tint-50:  #c9e8d3;
  --brand-tint-60:  #e5f5ea;

  /* ---- semantic ---- */
  --success: #0e7d3d;
  --success-bg: #e6f4ea;
  --warning: #855700;
  --warning-bg: #fff4ce;
  --danger:  #b3261e;
  --danger-bg: #fdecea;
  --info:    #217346;
  --info-bg: #e5f5ea;

  /* ---- neutrals (light, cinza esverdeado) ---- */
  --n-bg-canvas:    #eef2ef;
  --n-bg-1:         #f8faf8;
  --n-bg-2:         #eef2ef;
  --n-bg-3:         #e3e9e5;
  --n-bg-4:         #d7e0da;
  --n-bg-overlay:   rgba(0,0,0,.32);

  --n-fg-1:         #242424;
  --n-fg-2:         #424242;
  --n-fg-3:         #616161;
  --n-fg-disabled:  #a19f9d;
  --n-fg-oninverted:#ffffff;

  --n-stroke-1:     #d1d1d1;
  --n-stroke-2:     #e0e0e0;
  --n-stroke-accessible: #616161;

  --shadow-2:  0 0 2px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.14);
  --shadow-4:  0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.14);
  --shadow-8:  0 0 2px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.14);
  --shadow-16: 0 0 2px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.14);
  --shadow-28: 0 0 8px rgba(0,0,0,.12), 0 14px 28px rgba(0,0,0,.20);

  /* ---- radius ---- */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-circle: 999px;

  /* ---- spacing (4px grid) ---- */
  --sp-1: 2px;  --sp-2: 4px;  --sp-3: 8px;  --sp-4: 12px;
  --sp-5: 16px; --sp-6: 20px; --sp-7: 24px; --sp-8: 32px;
  --sp-9: 40px; --sp-10: 48px; --sp-11: 64px;

  /* ---- type ramp ---- */
  --font-base: "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --font-mono: "Cascadia Code", "Consolas", ui-monospace, monospace;
  --font-numeric: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-caption2: 10px;  --lh-caption2: 14px;
  --fs-caption1: 12px;  --lh-caption1: 16px;
  --fs-body1:    14px;  --lh-body1:    20px;
  --fs-body2:    16px;  --lh-body2:    22px;
  --fs-subtitle2:16px;  --lh-subtitle2:22px;
  --fs-subtitle1:20px;  --lh-subtitle1:26px;
  --fs-title3:   20px;  --lh-title3:   26px;
  --fs-title2:   24px;  --lh-title2:   32px;
  --fs-title1:   28px;  --lh-title1:   36px;
  --fs-large:    34px;  --lh-large:    44px;

  --nav-width: 268px;
  --nav-width-collapsed: 64px;
  --topbar-height: 52px;

  color-scheme: light;
}

/* ---- dark theme ---- */
[data-theme="dark"] {
  color-scheme: dark;

  --brand-tint-60: #0e2a1a;

  --n-bg-canvas:    #171d18;
  --n-bg-1:         #212a22;
  --n-bg-2:         #1a221b;
  --n-bg-3:         #19201a;
  --n-bg-4:         #2c362d;
  --n-bg-overlay:   rgba(0,0,0,.55);

  --n-fg-1:         #ffffff;
  --n-fg-2:         #d6d6d6;
  --n-fg-3:         #adadad;
  --n-fg-disabled:  #6b6b6b;
  --n-fg-oninverted:#242424;

  --n-stroke-1:     #3d3d3d;
  --n-stroke-2:     #2e2e2e;
  --n-stroke-accessible: #adadad;

  --brand-primary:  #4caf7d;

  --success: #6bc26e;
  --success-bg: #0e2f16;
  --warning: #e8b339;
  --warning-bg: #3a2e05;
  --danger:  #f1707b;
  --danger-bg: #3b0d0d;
  --info:    #4caf7d;
  --info-bg: #0e2a1a;

  --shadow-2:  0 0 2px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.5);
  --shadow-4:  0 0 2px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.5);
  --shadow-8:  0 0 2px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.5);
  --shadow-16: 0 0 2px rgba(0,0,0,.5), 0 8px 16px rgba(0,0,0,.5);
  --shadow-28: 0 0 8px rgba(0,0,0,.5), 0 14px 28px rgba(0,0,0,.6);
}