@layer reset, tokens, layout, components, utilities;

@layer reset {
  html, body, div, span, header, nav, main, aside, section, footer,
  h1, h2, h3, p, ul, ol, li, dl, dt, dd, button, input, select, textarea, dialog, kbd, output {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  ul, ol {
    list-style: none;
  }

  button, input, select, textarea {
    font: inherit;
    color: inherit;
    background: transparent;
  }
}

@layer tokens {
  :root {
    /* Core 2-Color Premise: Background (--bg) & Foreground (--fg) */
    --bg: #0B3D91;
    --fg: #E8F4F8;

    /* Derived 2-Color UI Tokens via oklab mixing */
    --surface-panel: color-mix(in oklab, var(--bg) 92%, var(--fg) 8%);
    --surface-elevated: color-mix(in oklab, var(--bg) 84%, var(--fg) 16%);
    --surface-hover: color-mix(in oklab, var(--bg) 76%, var(--fg) 24%);
    --surface-active: var(--fg);
    --text-on-active: var(--bg);
    --text-muted: color-mix(in oklab, var(--fg) 72%, var(--bg) 28%);
    --border-subtle: color-mix(in oklab, var(--fg) 26%, var(--bg) 74%);
    --border-strong: color-mix(in oklab, var(--fg) 58%, var(--bg) 42%);

    /* Single Technical Font Style across the entire app & canvas */
    --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    --topbar-h: 52px;
    --toolbar-w: 112px;
    --inspector-w: 300px;
  }

  @media (forced-colors: active) {
    :root {
      --surface-panel: Canvas;
      --surface-elevated: Canvas;
      --surface-hover: Highlight;
      --surface-active: Highlight;
      --text-on-active: HighlightText;
      --text-muted: GrayText;
      --border-subtle: CanvasText;
      --border-strong: CanvasText;
    }
  }
}

@layer layout {
  html, body {
    block-size: 100dvh;
    inline-size: 100dvw;
    overflow: hidden;
    background-color: var(--bg);
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.4;
    user-select: none;
    -webkit-font-smoothing: antialiased;
  }

  .topbar {
    block-size: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-inline: 14px;
    background-color: var(--surface-panel);
    border-block-end: 1.5px solid var(--border-strong);
  }

  .workspace-grid {
    display: grid;
    grid-template-columns: var(--toolbar-w) 1fr var(--inspector-w);
    block-size: calc(100dvh - var(--topbar-h));
    inline-size: 100%;
  }

  .toolbar-panel {
    background-color: var(--surface-panel);
    border-inline-end: 1.5px solid var(--border-strong);
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
  }

  .canvas-stage {
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    overflow: hidden;
    background-color: var(--bg);
  }

  #blueprint-canvas {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    touch-action: none;
    cursor: crosshair;
  }

  .inspector-panel {
    background-color: var(--surface-panel);
    border-inline-start: 1.5px solid var(--border-strong);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
}

@layer components {
  /* Focus Indicators */
  :where(a:any-link, button, input, select, textarea, [tabindex="0"]):focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 2px;
  }

  /* Brand Header */
  .brand-lockup {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }

  .brand-titles {
    display: flex;
    flex-direction: column;
  }

  .brand-name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.1;
  }

  .brand-subtitle {
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--text-muted);
  }

  .topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .action-group {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-inline-end: 10px;
    border-inline-end: 1px solid var(--border-subtle);
  }

  .action-group:last-child {
    padding-inline-end: 0;
    border-inline-end: none;
  }

  /* Buttons */
  .icon-btn,
  .mini-btn,
  .hud-btn,
  .preset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-block-size: 30px;
    min-inline-size: 30px;
    padding: 4px 9px;
    border: 1px solid var(--border-strong);
    background-color: var(--surface-elevated);
    color: var(--fg);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  }

  .compact-btn {
    padding-inline: 7px;
  }

  :where(.icon-btn, .mini-btn, .hud-btn, .preset-btn, .tool-btn):hover:not(:disabled) {
    background-color: var(--surface-hover);
    border-color: var(--fg);
  }

  :where(.icon-btn, .mini-btn, .hud-btn, .preset-btn, .tool-btn):disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  :where(.icon-btn, .tool-btn)[aria-pressed="true"],
  .primary-btn {
    background-color: var(--surface-active);
    color: var(--text-on-active);
    border-color: var(--fg);
  }

  :where(.icon-btn, .tool-btn)[aria-pressed="true"]:hover:not(:disabled),
  .primary-btn:hover:not(:disabled) {
    background-color: color-mix(in oklab, var(--fg) 88%, var(--bg) 12%);
    color: var(--text-on-active);
  }

  /* Theme & 2-Color Selector */
  .theme-bar {
    gap: 8px;
  }

  .bar-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .tech-select {
    min-block-size: 30px;
    padding: 4px 8px;
    border: 1px solid var(--border-strong);
    background-color: var(--surface-elevated);
    color: var(--fg);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
  }

  .tech-select option {
    background-color: var(--bg);
    color: var(--fg);
  }

  .color-pair {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .swatch-field {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 5px;
    border: 1px solid var(--border-subtle);
    background-color: var(--surface-elevated);
  }

  .swatch-label {
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
  }

  .color-swatch {
    inline-size: 22px;
    block-size: 22px;
    border: 1px solid var(--fg);
    padding: 0;
    cursor: pointer;
    forced-color-adjust: none;
  }

  .color-swatch::-webkit-color-swatch-wrapper {
    padding: 0;
  }

  .color-swatch::-webkit-color-swatch {
    border: none;
  }

  /* Left Toolset */
  .tool-section {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .section-caption {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    padding-inline: 2px;
  }

  .tool-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .tool-btn {
    inline-size: 100%;
    min-block-size: 34px;
    padding: 5px 7px;
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border-subtle);
    background-color: var(--surface-elevated);
    color: var(--fg);
    text-align: start;
    cursor: pointer;
  }

  .tool-name {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tool-key {
    font-size: 9px;
    opacity: 0.75;
    padding: 1px 3px;
    border: 1px solid currentColor;
  }

  /* Floating HUD */
  .canvas-hud {
    position: absolute;
    inset-block-end: 14px;
    inset-inline-start: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    background-color: var(--surface-panel);
    border: 1.5px solid var(--border-strong);
    box-shadow: 4px 4px 0 color-mix(in oklab, var(--bg) 60%, black 40%);
  }

  .hud-coords {
    display: flex;
    gap: 10px;
    font-size: 11px;
    min-inline-size: 128px;
  }

  .hud-divider {
    inline-size: 1px;
    block-size: 18px;
    background-color: var(--border-subtle);
  }

  .hud-zoom-controls {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .hud-btn {
    min-block-size: 26px;
    min-inline-size: 26px;
    padding: 2px 7px;
  }

  .zoom-readout {
    min-inline-size: 54px;
  }

  /* Inline Text Editor Overlay */
  .text-editor-overlay {
    position: absolute;
    z-index: 20;
    min-inline-size: 260px;
    max-inline-size: 380px;
    padding: 10px;
    background-color: var(--surface-panel);
    border: 2px solid var(--fg);
    box-shadow: 6px 6px 0 color-mix(in oklab, var(--bg) 50%, black 50%);
  }

  .text-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: 6px;
    font-size: 10px;
    font-weight: 700;
  }

  .text-editor-size {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .text-editor-size input {
    inline-size: 54px;
    padding: 2px 4px;
    border: 1px solid var(--border-strong);
    background-color: var(--surface-elevated);
    text-align: end;
  }

  #inline-text-input {
    inline-size: 100%;
    min-block-size: 64px;
    padding: 6px;
    border: 1px solid var(--border-strong);
    background-color: var(--bg);
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: 14px;
    resize: both;
  }

  .text-editor-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-block-start: 8px;
  }

  .editor-hint {
    font-size: 9px;
    color: var(--text-muted);
  }

  .editor-btns {
    display: flex;
    gap: 6px;
  }

  /* Right Inspector Panel */
  .panel-block {
    padding: 12px;
    border-block-end: 1.5px solid var(--border-strong);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .layers-block {
    flex: 1;
    min-block-size: 200px;
    overflow: hidden;
  }

  .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }

  .panel-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
  }

  .status-pill {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border: 1px solid var(--border-strong);
    background-color: var(--surface-elevated);
  }

  .prop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .prop-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .prop-field label,
  .row-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-muted);
  }

  .prop-field input,
  .prop-field select {
    inline-size: 100%;
    min-block-size: 28px;
    padding: 3px 6px;
    border: 1px solid var(--border-subtle);
    background-color: var(--surface-elevated);
    font-size: 11px;
    font-weight: 600;
  }

  .prop-field input:disabled {
    opacity: 0.45;
  }

  .prop-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .full-width {
    inline-size: 100%;
  }

  .slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mono-val {
    font-weight: 700;
    font-size: 11px;
  }

  .size-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  #prop-font-size {
    inline-size: 100%;
    accent-color: var(--fg);
    cursor: pointer;
  }

  .size-presets {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
  }

  .preset-btn {
    min-block-size: 24px;
    padding: 2px 4px;
    font-size: 10px;
  }

  .transform-action-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
  }

  .mini-btn {
    min-block-size: 26px;
    padding: 3px 6px;
    font-size: 10px;
  }

  /* Layers List */
  .layer-header-btns {
    display: flex;
    gap: 4px;
  }

  .layers-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow-y: auto;
    padding-inline-end: 2px;
  }

  .layer-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--border-subtle);
    background-color: var(--surface-elevated);
    cursor: pointer;
  }

  .layer-item[data-active="true"] {
    border: 1.5px solid var(--fg);
    background-color: var(--surface-hover);
  }

  .layer-toggles {
    display: flex;
    gap: 3px;
  }

  .layer-icon-btn {
    min-inline-size: 24px;
    min-block-size: 24px;
    padding: 2px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .layer-icon-btn:hover:not(:disabled) {
    border-color: var(--fg);
    background-color: var(--surface-panel);
  }

  .layer-icon-btn[aria-pressed="false"] {
    opacity: 0.42;
  }

  .layer-title-group {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
  }

  .layer-name {
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .layer-rename-input {
    inline-size: 100%;
    padding: 1px 4px;
    border: 1px solid var(--fg);
    background-color: var(--bg);
    color: var(--fg);
    font-size: 11px;
    font-weight: 700;
  }

  .layer-meta {
    font-size: 9px;
    color: var(--text-muted);
  }

  .layer-order-btns {
    display: flex;
    gap: 2px;
  }

  /* Inspector Footer */
  .inspector-footer {
    padding: 10px 12px;
    margin-block-start: auto;
    background-color: var(--surface-elevated);
    border-block-start: 1px solid var(--border-subtle);
  }

  .hint-text {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.45;
  }

  kbd {
    padding: 1px 4px;
    border: 1px solid var(--border-strong);
    background-color: var(--surface-panel);
    font-size: 9px;
    font-weight: 700;
  }

  /* Native Dialog */
  dialog {
    margin: auto;
    max-inline-size: 620px;
    inline-size: 92vw;
    background-color: var(--bg);
    color: var(--fg);
    border: 2px solid var(--fg);
    padding: 0;
    box-shadow: 10px 10px 0 color-mix(in oklab, var(--bg) 50%, black 50%);
  }

  dialog::backdrop {
    background-color: color-mix(in oklab, var(--bg) 70%, transparent 30%);
    backdrop-filter: blur(2px);
  }

  .dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background-color: var(--surface-panel);
    border-block-end: 1.5px solid var(--border-strong);
  }

  .dialog-header h2 {
    font-size: 13px;
    letter-spacing: 0.1em;
  }

  .dialog-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .dialog-lead {
    font-size: 12px;
    color: var(--text-muted);
  }

  .shortcut-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .shortcut-columns h3 {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-block-end: 8px;
    padding-block-end: 4px;
    border-block-end: 1px solid var(--border-subtle);
  }

  .shortcut-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .shortcut-list > div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
  }

  @media (pointer: coarse) {
    .icon-btn,
    .mini-btn,
    .hud-btn,
    .tool-btn {
      min-block-size: 38px;
    }
  }
}

@layer utilities {
  .visually-hidden:where(:not(:focus-within, :active)) {
    position: absolute !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: nowrap !important;
  }

  .skip-link:focus-visible {
    position: fixed;
    inset-block-start: 8px;
    inset-inline-start: 8px;
    z-index: 999;
    padding: 8px 12px;
    background-color: var(--fg);
    color: var(--bg);
    font-weight: 700;
  }
}