/**
 * AUSACT Design Tokens
 * CSS custom properties for theming across all web components.
 * Australian Action brand colours and spacing system.
 */

:root {
  /* Australian Action — Royal Violet. Fallback copy of the brand tokens;
     ausact-core's /theme.css is authoritative and overrides these. Keep
     these values identical to core. */
  --aa-violet: #6A1B9A;   /* primary */
  --aa-ink:    #3A0B5E;   /* type & dark surfaces */
  --aa-signal: #8B2FC9;   /* links, focus, hover */
  --aa-tint:   #EDE4F5;   /* fills, backgrounds */
  --paper:     #FBF9FD;   /* page background */
  --aa-muted:  #4a3a57;   /* secondary text */
  --aa-dim:    #7a6a87;   /* tertiary text */
  --aa-font-display: Georgia, "Times New Roman", serif;
  --aa-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --aa-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Brand colours — mapped onto the brand tokens only */
  --color-primary: var(--aa-violet);
  --color-primary-light: var(--aa-signal);
  --color-primary-dark: var(--aa-ink);
  --color-accent: var(--aa-signal);
  --color-accent-light: var(--aa-tint);
  --color-accent-dark: var(--aa-violet);

  /* Semantic colours (functional — not brand chrome) */
  --color-success: #2e7d32;
  --color-warning: #ed6c02;
  --color-error: #d32f2f;
  --color-info: #0288d1;

  /* Neutral palette — drawn from the brand tokens */
  --color-bg: var(--paper);
  --color-bg-secondary: var(--aa-tint);
  --color-bg-tertiary: var(--aa-tint);
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-text: var(--aa-ink);
  --color-text-secondary: var(--aa-muted);
  --color-text-tertiary: var(--aa-dim);
  --color-text-inverse: #ffffff;
  --color-border: var(--aa-tint);
  --color-border-light: var(--aa-tint);
  --color-divider: var(--aa-tint);

  /* Status colours (functional — encode verification state) */
  --color-unverified: #9e9e9e;
  --color-postcode-verified: #0288d1;
  --color-identity-verified: #2e7d32;
  --color-suspended: #d32f2f;

  /* Typography — Inter body, Fraunces display, mono for code */
  --font-family: var(--aa-font-body);
  --font-family-display: var(--aa-font-display);
  --font-family-mono: var(--aa-font-mono);
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;

  /* Z-index layers */
  --z-nav: 100;
  --z-modal: 200;
  --z-toast: 300;
  --z-overlay: 400;

  /* Layout */
  --nav-height: 56px;
  --nav-width-desktop: 240px;
  --content-max-width: 800px;
  --header-height: 48px;

  /* Font size multiplier (for accessibility) */
  --font-size-multiplier: 1;
}

/* Dark mode — Imperial Ink surfaces with a light-violet accent */
[data-theme="dark"] {
  /* Imperial Ink surfaces; depth from white/black alpha, accents in tint. */
  --color-primary: var(--aa-signal);
  --color-primary-light: var(--aa-tint);
  --color-primary-dark: var(--aa-violet);
  --color-accent: var(--aa-signal);
  --color-accent-light: var(--aa-tint);
  --color-accent-dark: var(--aa-violet);
  --color-bg: var(--aa-ink);
  --color-bg-secondary: rgba(0, 0, 0, 0.22);
  --color-bg-tertiary: rgba(255, 255, 255, 0.04);
  --color-surface: var(--aa-ink);
  --color-surface-elevated: rgba(255, 255, 255, 0.04);
  --color-text: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.72);
  --color-text-tertiary: rgba(255, 255, 255, 0.5);
  --color-border: rgba(255, 255, 255, 0.14);
  --color-border-light: rgba(255, 255, 255, 0.08);
  --color-divider: rgba(255, 255, 255, 0.14);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Respect system preference when no explicit theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Imperial Ink surfaces; depth from white/black alpha, accents in tint. */
    --color-primary: var(--aa-signal);
    --color-primary-light: var(--aa-tint);
    --color-primary-dark: var(--aa-violet);
    --color-accent: var(--aa-signal);
    --color-accent-light: var(--aa-tint);
    --color-accent-dark: var(--aa-violet);
    --color-bg: var(--aa-ink);
    --color-bg-secondary: rgba(0, 0, 0, 0.22);
    --color-bg-tertiary: rgba(255, 255, 255, 0.04);
    --color-surface: var(--aa-ink);
    --color-surface-elevated: rgba(255, 255, 255, 0.04);
    --color-text: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.72);
    --color-text-tertiary: rgba(255, 255, 255, 0.5);
    --color-border: rgba(255, 255, 255, 0.14);
    --color-border-light: rgba(255, 255, 255, 0.08);
    --color-divider: rgba(255, 255, 255, 0.14);
  }
}