/*
 * Design System tokens — single source of truth.
 * tailwind.config.js reads these via var(--ds-*); no values are duplicated there.
 * Colors mirror navbar.css's --nav/--accent rather than redefining them; when
 * navbar.css is migrated, its variables should become aliases of these instead
 * of the reverse.
 */
:root {
    /* color */
    --ds-color-nav: #181C3A;
    --ds-color-nav-2: #2C3160;
    --ds-color-nav-text: #B9BEDA;
    --ds-color-canvas: #F4F6FB;
    --ds-color-surface: #FFFFFF;
    --ds-color-border: #E3E7EF;
    --ds-color-text: #1F2937;
    --ds-color-muted: #718096;
    --ds-color-primary: #F5901E;
    --ds-color-primary-deep: #C96F06;
    --ds-color-danger: #DC2626;
    --ds-color-danger-soft: #FDECE9;
    --ds-color-success: #16A36A;
    --ds-color-success-soft: #E7F7F0;
    /* reused verbatim from globaladmin.css's existing warning status pattern */
    --ds-color-warning: #C96F06;
    --ds-color-warning-soft: #FFF4E6;

    /* typography — applied once via .backoffice-shell, never redeclared locally */
    --ds-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ds-font-size-xs: 11px;
    --ds-font-size-sm: 12px;
    --ds-font-size-md: 14px;
    --ds-font-size-lg: 16px;
    --ds-font-size-xl: 20px;
    --ds-font-size-2xl: 24px;
    --ds-font-weight-regular: 400;
    --ds-font-weight-medium: 500;
    --ds-font-weight-semibold: 600;
    --ds-font-weight-bold: 700;
    --ds-line-height-tight: 1.25;
    --ds-line-height-normal: 1.5;

    /* radius — semantic names, not sm/md/lg, to avoid ambiguity about which
       component each value applies to */
    --ds-radius-control: 8px;
    --ds-radius-card: 8px;
    --ds-radius-overlay: 8px;
    --ds-radius-pill: 9999px;

    --ds-shadow-card: 0 8px 24px rgba(31, 39, 50, 0.06);
    /* matches the focus-ring convention already used ~41x across the legacy
       per-page CSS files (e.g. globaladmin.css), just centralized here */
    --ds-shadow-focus: 0 0 0 3px rgba(245, 144, 30, 0.16);
    --ds-shadow-focus-danger: 0 0 0 3px rgba(220, 38, 38, 0.16);

    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-5: 20px;
    --ds-space-6: 24px;
    --ds-space-7: 28px;
    --ds-space-8: 32px;
    --ds-space-9: 36px;
    --ds-space-10: 40px;
    --ds-space-11: 44px;
    --ds-space-12: 48px;

    /* Public aliases for the spacing contract. Components should prefer the
       semantic --ds-space-* names; these aliases keep utility consumers on
       the same single source of truth during the progressive migration. */
    --space-1: var(--ds-space-1);
    --space-2: var(--ds-space-2);
    --space-3: var(--ds-space-3);
    --space-4: var(--ds-space-4);
    --space-5: var(--ds-space-5);
    --space-6: var(--ds-space-6);
    --space-7: var(--ds-space-7);
    --space-8: var(--ds-space-8);
    --space-9: var(--ds-space-9);
    --space-10: var(--ds-space-10);
    --space-11: var(--ds-space-11);
    --space-12: var(--ds-space-12);

    --ds-control-height-sm: 32px;
    --ds-control-height-md: 38px;
    --ds-control-height-lg: 44px;

    /* Navbar dropdown menus — single width scale shared by every menu in
       navbar.css's "UNIFIED NAVIGATION MENUS" section, so Loja/Relatórios/
       domínio/idioma/utilizador, Extras/Configurações and Conteúdos each
       pick one of exactly three widths instead of drifting independently. */
    --nav-menu-width: 212px;
    --nav-menu-wide-width: 248px;
    --nav-content-width: 350px;
    --ds-menu-offset: 10px;
    --ds-menu-zindex: 1060;

    /* motion — values only; component behaviour belongs in motion.css */
    --motion-duration-instant: 100ms;
    --motion-duration-fast: 140ms;
    --motion-duration-standard: 220ms;
    --motion-duration-emphasis: 360ms;
    --motion-duration-exit: 120ms;
    --motion-duration-spin: 700ms;
    --motion-duration-shimmer: 1400ms;
    --motion-ease-standard: cubic-bezier(.2, 0, 0, 1);
    --motion-ease-enter: cubic-bezier(.16, 1, .3, 1);
    --motion-ease-exit: cubic-bezier(.4, 0, 1, 1);
    --motion-distance-xs: 4px;
    --motion-distance-sm: 8px;
    --motion-distance-md: 12px;
    --motion-scale-press: .98;
    --motion-scale-enter: .98;

    /* Shared component motion contract. Keep these aliases explicit so new
       components do not depend on page-specific motion values. */
    --ds-motion-fast: 120ms;
    --ds-motion-base: 180ms;
    --ds-motion-slow: 240ms;
    --ds-ease-standard: cubic-bezier(.2, .8, .2, 1);
}

/*
 * Applied to the backoffice root wrapper only — never to <body> directly, so
 * the public-facing site (a different layout) is unaffected.
 */
.backoffice-shell {
    font-family: var(--ds-font-family);
}

.backoffice-shell button,
.backoffice-shell input,
.backoffice-shell select,
.backoffice-shell textarea {
    font: inherit;
}