/* ─────────────────────────────────────────────────────────────────────────────
   Theme: Neo Brutalist — Light Palette
   Inspiration: raw brutalist architecture — stark contrast, hard offset shadows,
   squared corners, heavy blocky type. Loud, bold, high-energy.
   ───────────────────────────────────────────────────────────────────────────── */

@layer reset, base, components, modules, utilities, native, platform;

@layer base {
  :root[data-theme="neo-brutalist"][data-mode="light"] {
    /* Typography */
    --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-normal: 400;
    --font-medium: 600;
    --font-bold: 700;
    --font-black: 900;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;

    /* Spacing (punchy, moderate) */
    --space-1xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-s: 0.75rem;
    --space-m: 1rem;
    --space-l: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Radii (squared) */
    --radius-s: 0;
    --radius-m: 0;
    --radius-l: 0;
    --radius-full: 9999px;

    /* Color Palette (bold graphic brutalism — vivid primaries) */
    --color-canvas: #f0faf0;
    --color-surface: #ffffff;
    --color-ink: #1b2a1b;
    --color-ink-faded: #6b7a64;
    --color-accent-primary: #00c853;
    --color-accent-secondary: #0084ff;
    --color-accent-tertiary: #ff2d55;
    --color-accent-quaternary: #ffd600;
    --color-shadow: var(--color-ink);
    --color-danger: #ff3b30;
    --color-warning: #ff9500;
    --color-success: #00e676;

    /* Borders */
    --border-width: 2px;
    --border-style: var(--border-width) solid var(--color-ink);
    --border-size-thin: 1px;
    --border-size-thick: 2px;

    /* Shadows (hard offset, no blur) */
    --shadow-sm: 3px 3px 0 0 var(--color-shadow);
    --shadow-md: 5px 5px 0 0 var(--color-shadow);
    --shadow-lg: 7px 7px 0 0 var(--color-shadow);

    /* Focus Ring */
    --focus-ring-width: 3px;
    --focus-ring-style: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--color-accent-primary), transparent 30%);
  }
}

@layer components {
  .button {
    border-width: var(--border-width);
    box-shadow: var(--shadow-lg);
    font-weight: var(--font-black);
    transition: transform 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  .button:has(:hover):not(:disabled) { transform: translate(3px, 3px); box-shadow: var(--shadow-sm); }
  .button:has(:active):not(:disabled) { transform: translate(6px, 6px); box-shadow: none; }

  .card { border-width: var(--border-width); box-shadow: var(--shadow-lg); }
  .badge { border-width: var(--border-width); font-weight: var(--font-black); }
  .alert { border-width: var(--border-width); box-shadow: var(--shadow-lg); }
  .sidebar__link { border-width: var(--border-width); }
  .table { border-width: var(--border-width); box-shadow: var(--shadow-lg); }
  .data-grid { border-width: var(--border-width); box-shadow: var(--shadow-lg); }
  .dialog { border-width: var(--border-width); box-shadow: var(--shadow-lg); }
  .tabs__label { border-width: var(--border-width); }
  .tabs__pane { border-width: var(--border-width); box-shadow: var(--shadow-lg); }
  .avatar { border-width: var(--border-width); box-shadow: var(--shadow-lg); }
  .pagination__arrow { border-width: var(--border-width); box-shadow: var(--shadow-sm); }
  .pagination__arrow:hover:not(.is-disabled) { box-shadow: var(--shadow-lg); }
  .progress { border-width: var(--border-width); }
  .chart { border-width: var(--border-width); box-shadow: var(--shadow-lg); }
  .calendar-wrapper { border-width: var(--border-width); box-shadow: var(--shadow-lg); }
  .dropdown__panel { border-width: var(--border-width); box-shadow: var(--shadow-lg); }
  .blank-state { border-width: var(--border-width); box-shadow: var(--shadow-lg); }
  .form-field__control { border-width: var(--border-width); box-shadow: var(--shadow-sm); }
  .form-field__control:focus-within { box-shadow: var(--focus-ring-style); }
}