/**
 * main.css - Core CSS Implementation
 * Provides base layout, typography, and UI styling support
 * 
 * @version 2.0
 */

/* Reset essentials */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Core variables */
:root {
  /* Typography */
  --font-main: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-size: 16px;
  --line-height: 1.5;
  
  /* Colors - from UI diagrams */
  --color-background: #ffffff;
  --color-text: #1a1a1a;
  --color-text-light: #666666;
  --color-border: #e5e5e5;
  --color-button: #3b82f6;
  --color-button-hover: #2563eb;
  --color-error: #dc2626;
  --color-success: #16a34a;
  
  /* Layout */
  --container-width: 1024px;
  --container-padding: 16px;
  --grid-gap: 16px;
  --form-spacing: 16px;
  --border-radius: 4px;
}

/* Base styles */
html {
  font-size: var(--font-size);
  line-height: var(--line-height);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-main);
  color: var(--color-text);
  background: var(--color-background);
  min-height: 100vh;
}

/* Layout */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Typography */
h1 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: var(--form-spacing);
}

h2 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: calc(var(--form-spacing) * 0.75);
}

p {
  margin-bottom: var(--form-spacing);
}

/* Forms */
.form-group {
  margin-bottom: var(--form-spacing);
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.form-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  font-family: inherit;
  font-size: inherit;
  transition: border-color 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-button);
}

.form-input:focus-visible {
  outline: 2px solid var(--color-button);
  outline-offset: 2px;
}

.form-input[data-state="error"],
.form-input[aria-invalid="true"] {
  border-color: var(--color-error);
}

.form-error {
  color: var(--color-error);
  font-size: 14px;
  margin-top: 4px;
}

/* Form States */
[data-form-state="submitting"],
[data-loading="true"] {
  opacity: 0.7;
  pointer-events: none;
}

[data-form-state="validating"] .form-submit {
  pointer-events: none;
  opacity: 0.7;
}

[data-form-state="error"] .form-input {
  border-color: var(--color-error);
}

[data-form-state="success"] .form-input {
  border-color: var(--color-success);
}

/* ESP Test Interface */
.esp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
  margin: var(--form-spacing) 0;
}

.esp-square {
  aspect-ratio: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  transition: opacity 0.2s;
}

.esp-square[data-selectable="false"] {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

.turn-counter {
  text-align: center;
  margin: var(--form-spacing) 0;
  font-weight: 500;
}

.result-message {
  text-align: center;
  margin: var(--form-spacing) 0;
  padding: 8px;
  border-radius: var(--border-radius);
}

.result-message[data-type="correct"] {
  background: var(--color-success);
  color: white;
}

.result-message[data-type="wrong"] {
  background: var(--color-error);
  color: white;
}

.result-message[data-type="skipped"] {
  background: var(--color-text-light);
  color: white;
}

/* Test States */
[data-test-state="active"] .esp-grid {
  pointer-events: all;
}

[data-test-state="complete"] .esp-grid {
  pointer-events: none;
  opacity: 0.7;
}

[data-turn-changing="true"] .esp-grid {
  pointer-events: none;
  opacity: 0.7;
}

/* Lottery Interface */
.lottery-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
  margin: var(--form-spacing) 0;
}

.lottery-number {
  aspect-ratio: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s, color 0.2s;
}

.lottery-number[data-selected="true"] {
  background: var(--color-button);
  color: white;
  border-color: var(--color-button);
}

.lottery-number[data-disabled="true"],
.lottery-grid[data-max-reached="true"] .lottery-number:not([data-selected="true"]) {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Core Buttons */
.button {
  padding: 8px 16px;
  background: var(--color-button);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  text-align: center;
  transition: background-color 0.2s;
}

.button:hover:not(:disabled) {
  background: var(--color-button-hover);
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button:focus-visible {
  outline: 2px solid var(--color-button);
  outline-offset: 2px;
}

.button-secondary {
  background: var(--color-border);
  color: var(--color-text);
}

.button-secondary:hover:not(:disabled) {
  background: #d1d5db;
}

/* Session States */
[data-session-state="warning"] .session-alert {
  background: var(--color-error);
  color: white;
  padding: 8px;
  border-radius: var(--border-radius);
  margin-bottom: var(--form-spacing);
}

[data-session-state="expired"] {
  pointer-events: none;
  opacity: 0.7;
}

/* Messages */
.message {
  padding: 8px;
  border-radius: var(--border-radius);
  margin-bottom: var(--form-spacing);
}

.message-error {
  background: var(--color-error);
  color: white;
}

.message-success {
  background: var(--color-success);
  color: white;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}