/* ═══ Aether — Design System Tokens ═══════════════════════════════════════
   Single source of truth for colour, radius, shadow, font, motion, logos.
   Loaded first by both adviser (templates/_base.html) and portal
   (templates/portal/_base.html). Never edit hardcoded values in component
   CSS — reach for a token instead. */

:root {
  /* — Brand primary — */
  --brand-navy-900: #001E3A;
  --brand-navy-800: #002C51;
  --brand-navy-700: #1A3E6B;
  --brand-teal-500: #009FB9;
  --brand-teal-100: rgba(0,159,185,0.10);

  /* — Secondary accents (decorative / chart) — */
  --accent-lavender-500: #6B5BD8;
  --accent-lavender-100: rgba(107,91,216,0.10);
  --accent-mint-500:     #48BB8B;
  --accent-mint-100:     rgba(72,187,139,0.12);
  --accent-orange-500:   #FF7A1A;
  --accent-orange-300:   #FFB066;
  --accent-orange-100:   rgba(255,122,26,0.12);

  /* — Surfaces & text — */
  --surface-page:    #F7F9FB;
  --surface-card:    #FFFFFF;
  --surface-sunken:  #F0F3F7;
  --border-soft:     #ECEEF3;
  --border-default:  #E2E6EB;
  --border-strong:   #C5CBD4;
  --text-primary:    #002C51;
  --text-secondary:  #4A5568;
  --text-muted:      #8A93A8;

  /* — Status (semantic) — */
  --status-success:    #2F8A57;
  --status-success-bg: rgba(47,138,87,0.10);
  --status-warn:       #B8860B;
  --status-warn-bg:    #FEF6DC;
  --status-danger:     #B23A3A;
  --status-danger-bg:  rgba(178,58,58,0.10);

  /* — Cloudy gradients (chart-card backgrounds, hero areas) — */
  --gradient-cloud-cool:   linear-gradient(135deg, #E8F2F5 0%, #ECE7F9 60%, #E4F4ED 100%);
  --gradient-cloud-warm:   linear-gradient(135deg, #FFF1E5 0%, #FFE5D1 50%, #FCEAD9 100%);
  --gradient-cloud-mint:   linear-gradient(135deg, #E4F4ED 0%, #ECF7F2 100%);
  --gradient-cloud-purple: linear-gradient(135deg, #ECE7F9 0%, #F4F0FB 100%);
  --gradient-sun-glow:     radial-gradient(circle,
                              rgba(255,122,26,0.36) 0%,
                              rgba(255,122,26,0.14) 35%,
                              transparent 65%);

  /* — Radii — */
  --radius-xs:   6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-pill: 999px;

  /* — Shadows (layered) — */
  --shadow-xs: 0 1px 2px rgba(30,42,71,0.04);
  --shadow-sm: 0 1px 2px rgba(30,42,71,0.04), 0 4px 12px rgba(30,42,71,0.04);
  --shadow-md: 0 4px 8px rgba(30,42,71,0.06), 0 12px 28px rgba(30,42,71,0.08);
  --shadow-lg: 0 8px 16px rgba(30,42,71,0.08), 0 24px 48px rgba(30,42,71,0.10);
  --shadow-glow-teal:   0 0 0 3px rgba(0,159,185,0.10);
  --shadow-glow-orange: 0 0 18px rgba(255,138,61,0.45); 

  /* — Typography — */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, monospace;

  --fs-eyebrow: 10px;
  --fs-xs:      11px;
  --fs-sm:      12px;
  --fs-body:    13px;
  --fs-md:      14px;
  --fs-lg:      16px;
  --fs-h3:      18px;
  --fs-h2:      22px;
  --fs-h1:      28px;
  --fs-display: 34px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* — Motion — */
  --ease-out:  cubic-bezier(.2,.8,.2,1);
  --dur-quick: 120ms;
  --dur-base:  180ms;
  --dur-slow:  280ms;

  /* — Logo asset URLs — */
  --logo-sidebar:       url('/static/img/logos/aether-stacked-dark.svg');
  --logo-horizontal-dk: url('/static/img/logos/aether-horizontal-dark.svg');
  --logo-horizontal-lt: url('/static/img/logos/aether-horizontal-light.svg');
  --logo-mono:          url('/static/img/logos/aether-mono-dark.svg');

  /* - Login screen BG */
  --login-bg: url('/static/img/login-bg.png');

  /* — Layout — */
  --sidebar-w: 240px;
    
}