/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@14.2.15_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/.pnpm/next@14.2.15_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/globals.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
:root {
  color-scheme: light;

  /* ─── Surface (Relation Atlas light palette) ─────────────── */
  --bg-canvas:        #F7F8FA;
  --bg-elevated:      #FFFFFF;
  --bg-subtle:        #F1F3F7;
  --bg-hover:         #EAEEF5;
  --bg-active:        #E5EDFC;

  --border-subtle:    rgba(16, 24, 40, 0.08);
  --border-strong:    rgba(16, 24, 40, 0.14);
  --border-focus:     rgba(66, 133, 244, 0.45);

  /* ─── Text ────────────────────────────────────────────────── */
  --text-primary:     #0F172A;
  --text-secondary:   #475569;
  --text-muted:       #94A3B8;
  --text-faint:       #CBD5E1;
  --text-on-tile:     #FFFFFF;

  /* ─── Class accents (saturated tiles like Relation Atlas) ── */
  --accent-table:     #5A9A3A;   /* deep green */
  --accent-view:      #4F8FC2;   /* blue */
  --accent-app:       #3D6FB5;   /* darker blue for apps */
  --accent-concept:   #E8A23C;   /* amber */
  --accent-source:    #9A6FC7;   /* violet */
  --accent-raw:       #88B049;   /* light green for staging/raw */

  --accent-critical:  #D43C3C;
  --accent-warning:   #E8A23C;
  --accent-highlight: #F3C947;   /* focus outline gold */

  /* ─── Datasource brand tints ─────────────────────────────── */
  --ds-bigquery:      #C26F2C;   /* warm amber for BQ grouping */
  --ds-mssql:         #5F7A8C;   /* slate blue-grey — matches GraphCanvas block tint; moved off red family so MSSQL chip + block + any top-right corner badges stop fighting real-alert signals */
  --ds-oracle:        #8B2E3A;   /* deep burgundy — matches GraphCanvas block tint, avoids alarm-red family */
  --ds-sheets:        #0F9D58;   /* Google green (future) */

  /* ─── Typography ─────────────────────────────────────────── */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "SF Pro Text",
               "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", Menlo, ui-monospace, monospace;

  /* ─── Rhythm ─────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 12px -2px rgba(16, 24, 40, 0.08), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 20px 48px -16px rgba(16, 24, 40, 0.18), 0 2px 6px rgba(16, 24, 40, 0.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-feature-settings: "cv11", "ss01", "ss03";
  background: var(--bg-canvas);
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

body {
  /* Faint dot grid — the Relation Atlas paper feel */
  background:
    radial-gradient(circle, rgba(16, 24, 40, 0.04) 1px, transparent 1px),
    var(--bg-canvas);
  background-size: 24px 24px, 100% 100%;
  background-attachment: fixed;
}

.glass {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--shadow-md);
}

.mono {
  font-family: var(--font-mono);
  font-feature-settings: none;
  font-variant-ligatures: none;
  letter-spacing: 0;
}

/* Scrollbars — light, unobtrusive */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: rgba(16, 24, 40, 0.15);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: rgba(16, 24, 40, 0.28); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

@keyframes subtle-rise {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.08); }
}