/* ============================================================
   ARIA — global stylesheet
   Tailwind v4 + the Aria design tokens. The @theme inline block
   wires Tailwind's utility namespaces to the existing CSS-variable
   tokens, so `bg-navy-900`, `rounded-lg`, `shadow-md`, `font-numeric`
   etc. all resolve to the design system, with zero duplication.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&family=Inter+Tight:wght@500;600;700;800&display=swap');
@import 'tailwindcss';
@import './tokens/colors.css';
@import './tokens/typography.css';
@import './tokens/spacing.css';

@theme inline {
  /* ---- Brand: Navy ---- */
  --color-navy-950: var(--navy-950);
  --color-navy-900: var(--navy-900);
  --color-navy-800: var(--navy-800);
  --color-navy-700: var(--navy-700);
  --color-navy-600: var(--navy-600);
  --color-navy-500: var(--navy-500);
  --color-navy-400: var(--navy-400);

  /* ---- Brand: Sunrise ---- */
  --color-sunrise-600: var(--sunrise-600);
  --color-sunrise-500: var(--sunrise-500);
  --color-sunrise-400: var(--sunrise-400);
  --color-sunrise-300: var(--sunrise-300);
  --color-sunrise-200: var(--sunrise-200);
  --color-sunrise-100: var(--sunrise-100);

  /* ---- Semantic: Emerald / Amber / Ruby / Sky ---- */
  --color-emerald-700: var(--emerald-700);
  --color-emerald-600: var(--emerald-600);
  --color-emerald-500: var(--emerald-500);
  --color-emerald-300: var(--emerald-300);
  --color-emerald-100: var(--emerald-100);
  --color-amber-700: var(--amber-700);
  --color-amber-600: var(--amber-600);
  --color-amber-500: var(--amber-500);
  --color-amber-300: var(--amber-300);
  --color-amber-100: var(--amber-100);
  --color-ruby-700: var(--ruby-700);
  --color-ruby-600: var(--ruby-600);
  --color-ruby-500: var(--ruby-500);
  --color-ruby-100: var(--ruby-100);
  --color-sky-700: var(--sky-700);
  --color-sky-600: var(--sky-600);
  --color-sky-500: var(--sky-500);
  --color-sky-100: var(--sky-100);

  /* ---- Neutral: Slate ---- */
  --color-slate-950: var(--slate-950);
  --color-slate-900: var(--slate-900);
  --color-slate-800: var(--slate-800);
  --color-slate-700: var(--slate-700);
  --color-slate-600: var(--slate-600);
  --color-slate-500: var(--slate-500);
  --color-slate-400: var(--slate-400);
  --color-slate-300: var(--slate-300);
  --color-slate-200: var(--slate-200);
  --color-slate-150: var(--slate-150);
  --color-slate-100: var(--slate-100);
  --color-slate-50: var(--slate-50);

  /* ---- Semantic aliases (short, readable utility names) ---- */
  --color-app: var(--surface-app);
  --color-card: var(--surface-card);
  --color-sunk: var(--surface-sunk);
  --color-strong: var(--text-strong);
  --color-body: var(--text-body);
  --color-muted: var(--text-muted);
  --color-faint: var(--text-faint);
  --color-on-navy: var(--text-on-navy);
  --color-on-navy-muted: var(--text-on-navy-muted);
  --color-accent: var(--text-accent);
  --color-link: var(--text-link);
  --color-border-subtle: var(--border-subtle);
  --color-border-default: var(--border-default);

  /* Aria status semantics */
  --color-autonomous: var(--status-autonomous);
  --color-autonomous-soft: var(--status-autonomous-soft);
  --color-escalated: var(--status-escalated);
  --color-escalated-soft: var(--status-escalated-soft);
  --color-info-soft: var(--status-info-soft);

  /* ---- Radii ---- */
  --radius-xs: var(--radius-xs);
  --radius-sm: var(--radius-sm);
  --radius-md: var(--radius-md);
  --radius-lg: var(--radius-lg);
  --radius-xl: var(--radius-xl);
  --radius-2xl: var(--radius-2xl);
  --radius-pill: var(--radius-pill);

  /* ---- Elevation ---- */
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-sunrise: var(--shadow-sunrise);

  /* ---- Fonts ---- */
  --font-sans: var(--font-sans);
  --font-numeric: var(--font-numeric);
  --font-mono: var(--font-mono);

  /* ---- Type scale ---- */
  --text-2xs: var(--text-2xs);
  --text-xs: var(--text-xs);
  --text-sm: var(--text-sm);
  --text-base: var(--text-base);
  --text-md: var(--text-md);
  --text-lg: var(--text-lg);
  --text-xl: var(--text-xl);
  --text-2xl: var(--text-2xl);
  --text-3xl: var(--text-3xl);
  --text-4xl: var(--text-4xl);
  --text-5xl: var(--text-5xl);
  --text-6xl: var(--text-6xl);
}

@layer base {
  html {
    height: 100%;
  }
  body,
  #root {
    min-height: 100%;
  }
  body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--surface-app);
    color: var(--text-body);
    -webkit-font-smoothing: antialiased;
  }
}

@layer components {
  /* Brand gradients — not expressible as plain utilities. */
  .bg-sunrise {
    background-image: var(--gradient-sunrise);
  }
  .bg-sunrise-soft {
    background-image: var(--gradient-sunrise-soft);
  }
  .bg-navy-grad {
    background-image: var(--gradient-navy);
  }
  /* Tabular figures for aligning currency & scores. */
  .nums {
    font-variant-numeric: tabular-nums;
  }
  /* Sunrise focus ring on inputs/selects. */
  .focus-ring:focus-within {
    border-color: var(--sunrise-500);
    box-shadow: var(--shadow-focus);
  }
  /* Slim, theme-tinted scrollbar for in-panel scroll areas (agenda, rail,
     modal body). The 2px transparent border + padding-box clip makes the thumb
     read as a thin rounded pill with breathing room; darkens on hover. */
  .scrollbar-slim {
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
  }
  .scrollbar-slim::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  .scrollbar-slim::-webkit-scrollbar-track {
    background: transparent;
  }
  .scrollbar-slim::-webkit-scrollbar-thumb {
    background-color: var(--border-default);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 9999px;
  }
  .scrollbar-slim:hover::-webkit-scrollbar-thumb {
    background-color: var(--text-faint);
  }
}