/*
 * ==========================================================================
 * design-tokens.css — Aderian Zelly Design Token System
 * ==========================================================================
 *
 * Shared design tokens aligned with the CloudOps frontend project.
 * This file is loaded FIRST, before all other application stylesheets,
 * so that every subsequent CSS file can reference these tokens via var().
 *
 * Naming convention:  --az-{category}-{name}
 *   az  = Aderian Zelly prefix
 * ========================================================================== */

:root {
  /* ---------- Brand Palette ---------- */
  --az-color-primary: #081FF0;
  --az-color-navy: #030C60;
  --az-color-bg-dark: #020630;
  --az-color-white: #FFFFFF;

  /* ---------- Semantic Colors ---------- */
  --az-color-success: #059669;
  --az-color-success-bg: #f0fdf4;
  --az-color-success-border: #bbf7d0;

  --az-color-warning: #d97706;
  --az-color-warning-bg: #fffbeb;
  --az-color-warning-border: #fed7aa;

  --az-color-error: #dc2626;
  --az-color-error-bg: #fef2f2;
  --az-color-error-border: #fecaca;

  --az-color-info: #6b7280;
  --az-color-info-bg: #f9fafb;
  --az-color-info-border: #d1d5db;

  /* ---------- Typography ---------- */
  --az-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --az-font-size-h1: clamp(1.75rem, 2.5vw, 2.25rem);
  --az-font-size-h2: clamp(1.375rem, 2vw, 1.75rem);
  --az-font-size-h3: clamp(1.125rem, 1.5vw, 1.375rem);
  --az-font-size-h4: clamp(1rem, 1.25vw, 1.125rem);
  --az-font-size-body: clamp(0.875rem, 1vw, 1rem);

  --az-font-weight-heading: 500;
  --az-line-height-heading: 1.15;
  --az-letter-spacing-body: -0.02em;

  /* ---------- Spacing ---------- */
  --az-space-xs: 4px;
  --az-space-sm: 8px;
  --az-space-md: 16px;
  --az-space-lg: 24px;
  --az-space-xl: 32px;

  /* ---------- Border Radii ---------- */
  --az-radius-button: 2rem;
  --az-radius-card: 0;
  --az-radius-input: 4px;

  /* ---------- Shadows ---------- */
  --az-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1);
  --az-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1);

  /* ---------- Transitions ---------- */
  --az-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --az-duration: 200ms;

  /* ---------- Surfaces (Light Mode) ---------- */
  --az-surface-main: #FFFFFF;
  --az-surface-header: #f8fafc;

  /* ---------- Text Colors ---------- */
  --az-text-primary: #1f2937;
  --az-text-secondary: #6b7280;

  /* ---------- Border Colors ---------- */
  --az-border-color: #e2e8f0;
  --az-border-input: #d1d5db;
}