/**
 * AquariumLesson Design System Tokens
 *
 * Phase 1 token layer only. This file intentionally defines CSS custom
 * properties and does not style components, reset elements, or override
 * existing AquariumLesson, Elementor, WooCommerce, or plugin classes.
 */

:root {
  /* Brand colors */
  --al-color-moss: #2c6b4a;
  --al-color-moss-rgb: 44, 107, 74;
  --al-color-deep-moss: #183f2d;
  --al-color-deep-moss-rgb: 24, 63, 45;
  --al-color-soft-aqua: #78b9a3;
  --al-color-soft-aqua-rgb: 120, 185, 163;
  --al-color-organic-highlight: #d7e8a7;
  --al-color-organic-highlight-rgb: 215, 232, 167;
  --al-color-canopy: #3f7f5b;
  --al-color-reef-mist: #e8f4ef;

  /* Text colors */
  --al-color-text-ink: #14231c;
  --al-color-text-muted: #52645b;
  --al-color-text-soft: #74857d;
  --al-color-text-inverse: #ffffff;

  /* Surface colors */
  --al-color-surface-page: #f6faf7;
  --al-color-surface-card: #ffffff;
  --al-color-surface-raised: #fbfdfb;
  --al-color-surface-subtle: #edf5f0;
  --al-color-surface-glass: rgba(255, 255, 255, 0.82);

  /* Borders */
  --al-color-border-default: rgba(44, 107, 74, 0.18);
  --al-color-border-strong: rgba(24, 63, 45, 0.34);
  --al-color-border-soft: rgba(44, 107, 74, 0.10);
  --al-color-border-focus: rgba(120, 185, 163, 0.78);

  /* State colors */
  --al-color-success: #2f7d55;
  --al-color-success-soft: #e2f3e8;
  --al-color-warning: #b57922;
  --al-color-warning-soft: #fff2d8;
  --al-color-danger: #b84a4a;
  --al-color-danger-soft: #fbe7e7;
  --al-color-info: #39758a;
  --al-color-info-soft: #e0f1f5;

  /* Radius */
  --al-radius-control: 10px;
  --al-radius-pill: 999px;
  --al-radius-card: 16px;
  --al-radius-modal: 24px;
  --al-radius-full: 9999px;

  /* Shadows */
  --al-shadow-subtle: 0 8px 24px rgba(24, 63, 45, 0.08);
  --al-shadow-raised: 0 18px 48px rgba(24, 63, 45, 0.14);
  --al-shadow-overlay: 0 28px 80px rgba(13, 31, 23, 0.24);
  --al-shadow-focus-ring: 0 0 0 4px rgba(120, 185, 163, 0.28);

  /* Spacing scale */
  --al-space-4: 4px;
  --al-space-8: 8px;
  --al-space-12: 12px;
  --al-space-16: 16px;
  --al-space-20: 20px;
  --al-space-24: 24px;
  --al-space-32: 32px;
  --al-space-40: 40px;
  --al-space-48: 48px;
  --al-space-64: 64px;

  /* Control sizes */
  --al-control-height-small: 36px;
  --al-control-height-default: 44px;
  --al-control-height-large: 52px;
  --al-control-icon-small: 16px;
  --al-control-icon-default: 20px;
  --al-control-icon-large: 24px;

  /* Typography */
  --al-font-family-sans: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --al-font-family-body: var(--al-font-family-sans);
  --al-font-family-heading: var(--al-font-family-sans);
  --al-font-size-xs: 0.75rem;
  --al-font-size-sm: 0.875rem;
  --al-font-size-md: 1rem;
  --al-font-size-lg: 1.125rem;
  --al-font-size-xl: 1.375rem;
  --al-font-size-2xl: 1.75rem;
  --al-font-size-3xl: 2.25rem;
  --al-line-height-tight: 1.18;
  --al-line-height-heading: 1.28;
  --al-line-height-body: 1.6;
  --al-font-weight-regular: 400;
  --al-font-weight-medium: 500;
  --al-font-weight-semibold: 600;
  --al-font-weight-bold: 700;

  /* Motion */
  --al-motion-fast: 140ms;
  --al-motion-normal: 220ms;
  --al-motion-slow: 360ms;
  --al-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --al-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --al-ease-in: cubic-bezier(0.7, 0, 0.84, 0);

  /* z-index scale */
  --al-z-base: 1;
  --al-z-sticky: 100;
  --al-z-header: 1000;
  --al-z-drawer: 3000;
  --al-z-modal: 5000;
  --al-z-toast: 7000;
  --al-z-consent: 9000;

  /* Safe areas and layout */
  --al-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --al-safe-area-top: env(safe-area-inset-top, 0px);
  --al-header-offset: 80px;
  --al-page-shell-max-width: 1180px;
  --al-section-spacing-small: 48px;
  --al-section-spacing-default: 72px;
  --al-section-spacing-large: 96px;
}