/* File: app/static/css/base.css */

/* ---------------------------------------------
 * Design Tokens (CSS Variables)
 * ------------------------------------------- */
:root {
  /* Layout */
  --cell: 48px; /* Pixel size of one cell */
  --sidebar-w: 240px;

  /* Colors */
  --bg: #fff;
  --grid-bold: #d0d0d0;

  /* Paint (selection / outlines) */
  --paint-blue: rgba(66, 133, 244, 0.25);
  --paint-blue-border: rgba(66, 133, 244, 0.9);
  --paint-red: rgba(220, 20, 60, 0.35);

  /* Trash zone */
  --trash-bg: rgba(220, 20, 60, 0.07);
  --trash-bg-active: rgba(220, 20, 60, 0.2);
  --trash-border: rgba(220, 20, 60, 0.5);
  --trash-border-active: rgba(220, 20, 60, 0.9);
  --trash-fg: #b00020;

  /* Block kinds */
  --ok-bg: #fafafa;
  --ok-border: #555;
  --warn-bg: #ffe9e9;
  --warn-border: #cc1e1e;
  --resource-bg: #ffe5e5;
  --resource-border: #d00000;
  --flag-bg: #e3f2fd;
  --flag-border: #1976d2;
  --trap-bg: #e8f5e9;
  --trap-border: #388e3c;
  --block123-bg: #fafafa;
  --block123-border: #555;
  --city-bg: #fff9c4;
  --city-border: #f9a825;

  /* World / Zoom */
  --zoom: 1; /* 1 = 100% */
  --world-w: 1200px; /* Updated dynamically by JS */
  --world-h: 1200px; /* Updated dynamically by JS */
  --rot-k: 0.7071067811865476; /* √2 / 2 */
}

/* Optional: dark mode background */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b0c;
  }
}

/* ---------------------------------------------
 * Cascade Layers
 * ------------------------------------------- */
@layer base, components, utilities;

/* ---------------------------------------------
 * Base
 * ------------------------------------------- */
@layer base {
  * {
    box-sizing: border-box;
  }

  html,
  body {
    height: 100%;
  }

  body {
    margin: 0;
    height: 100vh;
    display: grid;
    grid-template-areas: 'sidebar main';
    grid-template-columns: var(--sidebar-w) 1fr;
    font-family:
      system-ui,
      -apple-system,
      Segoe UI,
      Roboto,
      'Noto Sans KR',
      Helvetica,
      Arial,
      sans-serif;
    background: var(--bg);
    color: #111;
  }

  /* Place elements into fixed areas */
  .sidebar {
    grid-area: sidebar;
  }
  .viewport {
    grid-area: main;
  }

  /* RTL: swap the areas so sidebar moves to the right, sizes stay correct */
  body.rtl,
  html[dir='rtl'] body {
    direction: rtl;
    grid-template-areas: 'main sidebar';
    grid-template-columns: 1fr var(--sidebar-w);
  }

  /* Enhanced focus visibility */
  :focus-visible {
    outline: 2px solid #2684ff;
    outline-offset: 2px;
  }

  /* Reduce animation when user prefers reduced motion */
  @media (prefers-reduced-motion: reduce) {
    html:focus-within {
      scroll-behavior: auto;
    }
    * {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ---------------------------------------------
 * Components
 * ------------------------------------------- */
@layer components {
  .viewport {
    position: relative;
    overflow: auto;
    background: var(--bg);
    touch-action: none;
  }

  .viewport.panning {
    cursor: grabbing;
  }

  .world {
    position: relative;
  }

  .rot {
    position: absolute;
    inset: 0;
    transform-origin: 0 0; /* All calculations are based on origin */

    /* Order matters: translate → rotate → scale(-1) → zoom */
    transform: translate(
        calc(var(--world-w) * var(--rot-k)),
        calc((var(--world-w) + var(--world-h)) * var(--rot-k))
      )
      rotate(45deg) scale(-1) scale(var(--zoom));
  }
}

/* ---------------------------------------------
 * Utilities
 * ------------------------------------------- */
@layer utilities {
  /* Add utility classes here if needed */
}