/* ============================================================
   Fluxo Core v3 — Design Tokens
   Location: shared-ui/tokens/theme.css
   Aesthetic: Architectural Stream
     - Clean white (light) / deep slate (dark)
     - Deep navy primary
     - 12px standardized radius
   ============================================================ */

:root,
:root[data-theme="light"] {
  /* --------  Brand  -------- */
  --brand-name: "Fluxo";

  /* --------  Color: Primary (Deep Navy)  -------- */
  --color-primary:          #003d9b;
  --color-primary-hover:    #0050c7;
  --color-primary-pressed:  #002f78;
  --color-primary-tint:     #e6edf8;
  --color-primary-tint-2:   #c2d2ee;
  --color-on-primary:       #ffffff;

  /* --------  Color: Success / Danger / Warning / Info  -------- */
  --color-success:          #006c47;
  --color-success-hover:    #008a5b;
  --color-success-tint:     #e3f2eb;
  --color-on-success:       #ffffff;

  --color-danger:           #ba1a1a;
  --color-danger-hover:     #d42626;
  --color-danger-tint:      #fce8e8;
  --color-on-danger:        #ffffff;

  --color-warning:          #b85e00;
  --color-warning-tint:     #fdeedb;
  --color-on-warning:       #ffffff;

  --color-info:             #0059b3;
  --color-info-tint:        #e1edfa;

  /* --------  Color: Surfaces (light)  -------- */
  --color-bg-page:          #f6f7f9;
  --color-bg-surface:       #ffffff;
  --color-bg-sunken:        #eceef2;
  --color-bg-raised:        #ffffff;
  --color-bg-sidebar:       #ffffff;
  --color-bg-glass:         rgba(255, 255, 255, 0.72);

  /* --------  Color: Borders  -------- */
  --color-border:           #e3e6ec;
  --color-border-strong:    #cbd0d9;
  --color-border-primary:   #003d9b;

  /* --------  Color: Text  -------- */
  --color-text-primary:     #0a1330;
  --color-text-body:        #3a4354;
  --color-text-muted:       #67708a;
  --color-text-dim:         #98a0b5;
  --color-text-on-navy:     #ffffff;

  --color-link:             var(--color-primary);
  --color-link-hover:       var(--color-primary-hover);

  /* Shadows tuned for light bg */
  --shadow-xs:   0 1px 2px  rgba(10, 19, 48, 0.04);
  --shadow-sm:   0 1px 3px  rgba(10, 19, 48, 0.06), 0 1px 2px rgba(10, 19, 48, 0.04);
  --shadow-md:   0 4px 12px rgba(10, 19, 48, 0.08), 0 1px 2px rgba(10, 19, 48, 0.04);
  --shadow-lg:   0 12px 28px rgba(10, 19, 48, 0.10), 0 2px 4px rgba(10, 19, 48, 0.04);
  --shadow-architectural: 0 24px 48px rgba(10, 19, 48, 0.08), 0 4px 12px rgba(10, 19, 48, 0.06);

  --focus-ring: 0 0 0 3px rgba(0, 61, 155, 0.28);
}

/* ============================================================
   DARK MODE — overrides only the colors, everything else stays
   ============================================================ */

:root[data-theme="dark"] {
  /* Primary brightens slightly so it stays legible on dark */
  --color-primary:          #4d8bff;
  --color-primary-hover:    #6aa0ff;
  --color-primary-pressed:  #2f6ee0;
  --color-primary-tint:     rgba(77, 139, 255, 0.12);
  --color-primary-tint-2:   rgba(77, 139, 255, 0.22);
  --color-on-primary:       #0a1330;

  --color-success:          #3dd68c;
  --color-success-hover:    #5ae0a0;
  --color-success-tint:     rgba(61, 214, 140, 0.12);

  --color-danger:           #ff6b6b;
  --color-danger-hover:     #ff8080;
  --color-danger-tint:      rgba(255, 107, 107, 0.12);

  --color-warning:          #ffa94d;
  --color-warning-tint:     rgba(255, 169, 77, 0.12);

  --color-info:             #62a8ff;
  --color-info-tint:        rgba(98, 168, 255, 0.12);

  /* Surfaces — deep slate, warmer than pure black */
  --color-bg-page:          #0b1020;
  --color-bg-surface:       #141a2e;
  --color-bg-sunken:        #0a0f1f;
  --color-bg-raised:        #1a2138;
  --color-bg-sidebar:       #0c1122;
  --color-bg-glass:         rgba(20, 26, 46, 0.72);

  --color-border:           #242b44;
  --color-border-strong:    #353e5e;
  --color-border-primary:   #4d8bff;

  /* Text — light on dark */
  --color-text-primary:     #eef1f8;
  --color-text-body:        #c4cadc;
  --color-text-muted:       #8890a8;
  --color-text-dim:         #5a6280;
  --color-text-on-navy:     #ffffff;

  /* Shadows: deeper, more opacity on dark */
  --shadow-xs:   0 1px 2px  rgba(0, 0, 0, 0.3);
  --shadow-sm:   0 1px 3px  rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lg:   0 12px 28px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-architectural: 0 24px 48px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);

  --focus-ring: 0 0 0 3px rgba(77, 139, 255, 0.35);
}

/* Shared (non-themed) tokens — live once at :root level */
:root {
  /* Typography */
  --font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ui:      "Inter",   -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-lg:   1.0625rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-widest:  0.12em;

  /* Spacing */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Radius */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  --blur-glass: 20px;

  /* Motion */
  --ease-out:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-med:  220ms;
  --duration-slow: 400ms;

  /* Layout */
  --sidebar-width: 248px;
  --header-height: 88px;
  --content-max:   1440px;
  --bp-desktop:    1024px;
}

/* ============================================================
   Baseline resets
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--color-bg-page);
  color: var(--color-text-body);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Theme transition — smooth color flips when toggling */
  transition: background-color var(--duration-med) var(--ease-out),
              color var(--duration-med) var(--ease-out);
}

h1, h2, h3, h4, h5 {
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}

h1 { font-size: var(--text-3xl); font-weight: var(--weight-extrabold); }
h2 { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
h3 { font-size: var(--text-xl); font-weight: var(--weight-bold); }
h4 { font-size: var(--text-lg); font-weight: var(--weight-semibold); font-family: var(--font-ui); }

p { margin: 0 0 var(--space-md) 0; }

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--color-link-hover); }

button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* ============================================================
   Material Symbols base
   Per Google guidance: set font-variation-settings for weight/fill/grade/opsz.
   ============================================================ */

.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  font-size: 20px;
  line-height: 1;
  user-select: none;
  vertical-align: middle;
}

/* ============================================================
   Utility classes
   ============================================================ */

.num, .num * {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.display-number {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  font-feature-settings: "tnum" 1;
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}