/*
 * twentymiles Global Styles
 * Layer order declaration + Design tokens
 * 
 * This file MUST be loaded first. The underscore prefix ensures
 * alphabetical ordering places it before other files.
 */

@layer reset, base, components, utilities;

:root {
  /* ═══════════════════════════════════════════════════════════════════════════
     SPACING
     Use block-space for vertical, inline-space for horizontal
     ═══════════════════════════════════════════════════════════════════════════ */
  --inline-space: 1ch;
  --inline-space-half: calc(var(--inline-space) / 2);
  --inline-space-double: calc(var(--inline-space) * 2);

  --block-space: 1rem;
  --block-space-half: calc(var(--block-space) / 2);
  --block-space-double: calc(var(--block-space) * 2);

  /* Named spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* ═══════════════════════════════════════════════════════════════════════════
     TYPOGRAPHY
     ═══════════════════════════════════════════════════════════════════════════ */
  --font-sans: "Google Sans Text", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --weight-extralight: 200;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 600;

  --text-xx-small: 0.6875rem;
  --text-x-small: 0.75rem;
  --text-small: 0.875rem;
  --text-normal: 1rem;
  --text-medium: 1.125rem;
  --text-large: 1.5rem;
  --text-x-large: 2rem;
  --text-xx-large: 2.5rem;

  /* ═══════════════════════════════════════════════════════════════════════════
     COLORS
     ═══════════════════════════════════════════════════════════════════════════ */
  --color-canvas: #ffffff;
  --color-canvas-raised: #f8f8f8;
  --color-canvas-sunken: #f0f0f0;

  --color-ink: #1a1a1a;
  --color-ink-muted: #666666;
  --color-ink-faint: #999999;
  --color-ink-inverted: #ffffff;

  --color-primary: #007f7b;
  --color-primary-hover: #006663;

  --color-positive: #2e7d32;
  --color-negative: #c62828;

  --color-border: #e5e5e5;
  --color-border-light: #f0f0f0;

  /* ═══════════════════════════════════════════════════════════════════════════
     BORDERS & RADIUS
     ═══════════════════════════════════════════════════════════════════════════ */
  --border: 1px solid var(--color-border);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* ═══════════════════════════════════════════════════════════════════════════
     SHADOWS
     ═══════════════════════════════════════════════════════════════════════════ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* ═══════════════════════════════════════════════════════════════════════════
     LAYOUT
     ═══════════════════════════════════════════════════════════════════════════ */
  --content-width: 618px;
  --main-padding: clamp(var(--space-4), 5vw, var(--space-8));

  /* ═══════════════════════════════════════════════════════════════════════════
     Z-INDEX
     ═══════════════════════════════════════════════════════════════════════════ */
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-nav: 30;
  --z-flash: 40;
  --z-modal: 50;
  --z-tooltip: 60;

  /* ═══════════════════════════════════════════════════════════════════════════
     FOCUS & ACCESSIBILITY
     ═══════════════════════════════════════════════════════════════════════════ */
  --focus-ring-color: var(--color-primary);
  --focus-ring-size: 2px;
  --focus-ring-offset: 2px;

  /* ═══════════════════════════════════════════════════════════════════════════
     MOTION
     ═══════════════════════════════════════════════════════════════════════════ */
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}