src/index.css

@import "tailwindcss";

@theme {
  --color-surface-tint: #5f5e5e;
  --color-error-container: #ffdad6;
  --color-surface-dim: #ddd9d8;
  --color-error: #ba1a1a;
  --color-on-secondary: #ffffff;
  --color-tertiary-fixed-dim: #78dc77;
  --color-secondary-fixed-dim: #d5ca00;
  --color-on-primary-fixed: #1b1c1c;
  --color-on-tertiary-fixed-variant: #005313;
  --color-on-secondary-fixed-variant: #4d4800;
  --color-on-error: #ffffff;
  --color-on-background: #1c1b1b;
  --color-on-secondary-fixed: #1e1c00;
  --color-tertiary: #001e03;
  --color-on-tertiary-fixed: #002204;
  --color-primary: #181919;
  --color-surface-container: #f1edec;
  --color-primary-container: #2d2d2d;
  --color-on-surface-variant: #444748;
  --color-surface-variant: #e5e2e1;
  --color-on-secondary-container: #6a6500;
  --color-on-primary: #ffffff;
  --color-primary-fixed: #e4e2e1;
  --color-surface-bright: #fdf8f8;
  --color-inverse-primary: #c8c6c6;
  --color-secondary-fixed: #f3e700;
  --color-on-surface: #1c1b1b;
  --color-surface: #fdf8f8;
  --color-on-tertiary-container: #45a84a;
  --color-background: #fdf8f8;
  --color-surface-container-lowest: #ffffff;
  --color-tertiary-fixed: #94f990;
  --color-secondary: #666000;
  --color-on-primary-container: #959494;
  --color-outline-variant: #c4c7c7;
  --color-secondary-container: #f0e400;
  --color-on-error-container: #93000a;
  --color-primary-fixed-dim: #c8c6c6;
  --color-tertiary-container: #003609;
  --color-outline: #747878;
  --color-on-tertiary: #ffffff;
  --color-surface-container-low: #f7f3f2;
  --color-inverse-surface: #313030;
  --color-surface-container-high: #ebe7e7;
  --color-on-primary-fixed-variant: #474747;
  --color-surface-container-highest: #e5e2e1;
  --color-inverse-on-surface: #f4f0ef;

  --font-headline-md: "Caveat", cursive;
  --font-label-sm: "Inter", sans-serif;
  --font-accent-note: "Caveat", cursive;
  --font-body-md: "Inter", sans-serif;
  --font-body-lg: "Inter", sans-serif;
  --font-display-lg: "Caveat", cursive;

  --font-size-headline-md: 32px;
  --font-size-label-sm: 13px;
  --font-size-accent-note: 24px;
  --font-size-body-md: 16px;
  --font-size-body-lg: 18px;
  --font-size-display-lg: 56px;

  --spacing-base_grid: 8px;
  --spacing-grid_pattern: 24px;
  --spacing-gutter: 24px;
  --spacing-margin_edge: 32px;

  --animate-shake: shake 0.3s ease-in-out;

  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
  }
}

@utility graph-paper-bg {
  background-color: #fdf8f8;
  background-image: 
    linear-gradient(#e5e2e1 1px, transparent 1px),
    linear-gradient(90deg, #e5e2e1 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: center top;
}

@utility rough-border {
  border: 2px solid var(--color-primary);
  border-radius: 4px 12px 6px 14px;
}

@utility rough-shadow {
  box-shadow: 6px 6px 0px 0px rgba(0,0,0,0.1);
}

@utility rough-shadow-hover {
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  &:hover {
    box-shadow: 10px 10px 0px 0px rgba(0,0,0,0.15);
    transform: translate(-4px, -4px);
  }
}

@utility diamond-shape {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

@utility highlighter-bg {
  position: relative;
  display: inline-block;
  z-index: 0;
  &::after {
    content: '';
    position: absolute;
    left: -4px;
    right: -4px;
    bottom: 4px;
    height: 40%;
    background-color: rgba(240, 228, 0, 0.6);
    z-index: -1;
    transform: rotate(-1deg);
    animation: highlight-draw 1s ease-out forwards;
    transform-origin: left;
  }
}

@keyframes highlight-draw {
  from { transform: scaleX(0) rotate(-1deg); }
  to { transform: scaleX(1) rotate(-1deg); }
}

@utility sketched-line {
  stroke-dasharray: 5 5;
}

body {
  @apply bg-background text-on-background font-body-md graph-paper-bg min-h-screen overflow-x-hidden;
  font-size: 16px;
}

h1, h2, h3 {
  @apply font-display-lg;
}

/* React Flow Component Overrides */
.react-flow__controls {
  @apply !rough-border !p-0 !bg-surface-container-lowest !shadow-md;
}

.react-flow__controls-button {
  @apply !bg-surface-container-lowest !border-none !border-b-2 !border-primary/10 hover:!bg-surface-variant transition-colors;
}

.react-flow__controls-button svg {
  fill: var(--color-primary);
}

.react-flow__controls-button:last-child {
  @apply !border-b-0;
}

.react-flow__minimap {
  @apply !rough-border !bg-surface-container-lowest !shadow-lg;
}

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

/* Dark Theme Overrides */
.dark {
  --color-background: #141516;
  --color-on-background: #e2e3e4;
  --color-primary: #e2e3e4;
  --color-on-primary: #141516;
  
  --color-surface: #141516;
  --color-on-surface: #e2e3e4;
  
  --color-surface-container-lowest: #1a1b1d;
  --color-surface-container-low: #1d1e20;
  --color-surface-container: #222326;
  --color-surface-container-high: #28292c;
  --color-surface-container-highest: #2d2f32;
  
  --color-surface-variant: #2d2f32;
  --color-on-surface-variant: #b0b4b8;
  
  --color-primary-container: #2b2c2f;
  --color-on-primary-container: #9da1a5;
  
  --color-outline: #8c9094;
  --color-outline-variant: #44474a;
  
  --color-secondary-container: #a29b00;
  
  .rough-shadow {
    box-shadow: 6px 6px 0px 0px rgba(255, 255, 255, 0.07);
  }
  
  .rough-shadow-hover:hover {
    box-shadow: 10px 10px 0px 0px rgba(255, 255, 255, 0.1);
  }

  .rough-border {
    border-color: #3e4042;
  }
}

.dark .graph-paper-bg,
.dark.graph-paper-bg,
.dark body {
  background-color: var(--color-background) !important;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
}

/* Custom Loading Screen Animations */
@keyframes loading-bar {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-loading-bar {
  animation: loading-bar 2s ease-in-out infinite;
}

.animate-spin-slow {
  animation: spin-slow 12s linear infinite;
}