/* Maths4All Design System & Tokens */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --navy-900: #001B3D;
  --navy-800: #0B1B33;
  --navy: #0047AB;
  --navy-600: #0F5AC4;
  --navy-400: #5C8AD6;
  --navy-soft: #E9F0FB;
  --teal: #4DB6AC;
  --teal-700: #2E8F86;
  --teal-soft: #E3F5F3;
  --amber: #FFB300;
  --amber-700: #B87800;
  --amber-soft: #FFF3D9;
  --slate: #475569;
  --slate-400: #93A0B4;
  --slate-200: #DCE3EE;
  --canvas: #F4F7FC;
  --white: #FFFFFF;
  --ink: #0B1B33;
}

* {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

/* Math Grid Texture Background */
.grid-texture-light {
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 28px 28px;
}

.grid-texture-dark {
  background-image: 
    linear-gradient(to right, rgba(0, 27, 61, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 27, 61, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Direct App View Styling */
html, body {
  width: 100%;
  height: 100%;
  background-color: var(--canvas);
  color: var(--ink);
  overflow-x: hidden;
}

#app-root {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--canvas);
}

/* Wave Line Accent */
.sine-accent {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  width: 100%;
  height: 90px;
}