/**
 * AHMED / NESMA — design tokens (Phase 1 foundation)
 * Brand primitives + shared scales. Components consume semantic tokens in themes.css.
 */

:root {
  /* —— NESMA brand primitives (do not use directly for status semantics) —— */
  --brand-orange: #FF801E;
  --brand-black: #161917;
  --brand-dark-teal: #21403D;
  --brand-teal: #42807A;
  --brand-amber: #F9A000;

  --brand-orange-soft: color-mix(in srgb, var(--brand-orange) 14%, white);
  --brand-teal-soft: color-mix(in srgb, var(--brand-teal) 12%, white);
  --brand-dark-teal-soft: color-mix(in srgb, var(--brand-dark-teal) 10%, white);

  /* Progressive brand signature — use sparingly (nav marker, accents) */
  --brand-progress-marker: var(--brand-orange);
  --brand-progress-marker-w: 3px;

  /* —— Radius (corporate restraint) —— */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;

  /* Legacy aliases consumed across themes.css / app.css */
  --ag-radius-sm: var(--radius-md);
  --ag-radius: var(--radius-lg);
  --ag-radius-lg: var(--radius-lg);
  --ag-radius-xl: var(--radius-xl);

  /* —— Motion —— */
  --motion-fast: 120ms;
  --motion-normal: 160ms;
  --motion-press: 80ms;
  --motion-drawer: 200ms;
  --motion-expand: 200ms;
  --ag-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ag-ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* —— Action control sizes —— */
  --action-h-sm: 32px;
  --action-h: 40px;
  --action-h-lg: 44px;
  --action-px: 16px;
  --action-px-sm: 12px;
  --action-radius: var(--radius-md);
  --action-font: 0.875rem;
  --action-font-weight: 600;
  --action-icon: 18px;
  --action-gap: 7px;
  --action-icon-btn: 34px;

  /* —— Action color tokens (light defaults; themes may override) —— */
  --action-primary-bg: var(--brand-dark-teal);
  --action-primary-hover: #1A3532;
  --action-primary-active: #142927;
  --action-primary-text: #FFFFFF;

  --action-secondary-bg: #FFFFFF;
  --action-secondary-border: #C4C6CB;
  --action-secondary-text: var(--brand-dark-teal);
  --action-secondary-hover: #F1F3F5;

  --action-tertiary-text: var(--brand-dark-teal);
  --action-tertiary-hover: color-mix(in srgb, var(--brand-dark-teal) 8%, transparent);

  --action-brand-bg: var(--brand-orange);
  --action-brand-hover: #E8731A;
  --action-brand-text: #FFFFFF;

  --action-danger-bg: transparent;
  --action-danger-border: color-mix(in srgb, #B91C1C 40%, transparent);
  --action-danger-text: #B91C1C;
  --action-danger-hover: color-mix(in srgb, #FECACA 55%, transparent);
  --action-danger-filled-bg: #B91C1C;
  --action-danger-filled-hover: #991B1B;
  --action-danger-filled-text: #FFFFFF;

  --action-success-bg: #047857;
  --action-success-hover: #066A4C;
  --action-success-text: #FFFFFF;

  --action-disabled-bg: #E8EAED;
  --action-disabled-text: #8A96A8;
  --action-disabled-border: #D8D9DC;

  --action-focus-ring: 0 0 0 2px color-mix(in srgb, var(--brand-orange) 55%, white),
    0 0 0 4px color-mix(in srgb, var(--brand-dark-teal) 35%, transparent);

  /* —— Layout —— */
  --layout-header-h: 64px;
  --layout-sidebar-w: 280px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-normal: 0ms;
    --motion-drawer: 0ms;
  }
}