/**
 * A&A Elevator — Design tokens
 *
 * Extracted from the company mobile app (screenshots 2026-07-12: login,
 * tickets list, ticket detail, confirm dialog, report form). These custom
 * properties are the single source of truth for the web design-unification
 * phase. Loading this file changes NOTHING visually until components start
 * consuming the variables — apply screen by screen with review checkpoints.
 *
 * Naming: --aae-* (project prefix). Scale suffixes follow weight
 * (900 darkest → 100 lightest).
 */

:root {
	/* ===== Brand color — blues (from app backgrounds, headers, icons) ===== */
	--aae-blue-900: #0a2e4f;  /* bottom nav bar, darkest surfaces            */
	--aae-blue-800: #0d3d6b;  /* icon circles, LOGIN button, modal header    */
	--aae-blue-700: #0e4c8a;  /* headings, links, key figures ("ID: 52216")  */
	--aae-blue-500: #1465a8;  /* main brand blue (app hero background)       */
	--aae-blue-400: #5b93b8;  /* steel-blue secondary cards (checklist)      */
	--aae-blue-200: #bfd7e8;  /* light-blue strips, image gallery band       */
	--aae-blue-100: #d8e6f2;  /* pill input background, soft chips           */

	/* ===== Accent (alerts, open-ticket badge, failure card) ===== */
	--aae-accent:      #ff5a36;
	--aae-accent-text: #ffffff;

	/* ===== Neutrals ===== */
	--aae-bg:         #eceef0;  /* app screen background (light gray)        */
	--aae-surface:    #ffffff;  /* cards, modals                             */
	--aae-text:       #26343f;  /* primary body text                         */
	--aae-text-muted: #8a9199;  /* secondary text ("Elevator: 34444 - 1")    */
	--aae-text-on-brand: #ffffff;

	/* ===== State helpers ===== */
	--aae-success: #2e9e5b;
	--aae-warning: #f5a623;
	--aae-danger:  var(--aae-accent);

	/* ===== Typography =====
	 * App headings: bold condensed ITALIC ("Go further and higher together",
	 * "TICKET", user name). Body: geometric rounded sans.
	 * TODO: confirm the app's exact typefaces; Montserrat approximates both
	 * roles well and is self-hostable. Swap here once confirmed.
	 */
	--aae-font-heading: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	--aae-font-body:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	--aae-heading-style: italic;       /* the app's signature italic titles  */
	--aae-heading-weight: 700;
	--aae-heading-transform: uppercase; /* section titles: TICKETS, HOURS    */

	--aae-text-xs: 0.75rem;   /* 12px — badges, bottom-nav labels            */
	--aae-text-sm: 0.875rem;  /* 14px — secondary/meta text                  */
	--aae-text-md: 1rem;      /* 16px — body                                 */
	--aae-text-lg: 1.25rem;   /* 20px — card titles, ticket ids              */
	--aae-text-xl: 1.5rem;    /* 24px — screen titles (TICKET, REPORT)       */
	--aae-text-2xl: 2rem;     /* 32px — hero slogan                          */

	/* ===== Shape — the app is heavily rounded ===== */
	--aae-radius-sm:   8px;    /* small chips                                */
	--aae-radius-md:   16px;   /* cards, panels, modals                      */
	--aae-radius-pill: 999px;  /* inputs, buttons, search box, badges        */

	/* ===== Spacing (4px base) ===== */
	--aae-space-1: 0.25rem;
	--aae-space-2: 0.5rem;
	--aae-space-3: 0.75rem;
	--aae-space-4: 1rem;
	--aae-space-6: 1.5rem;
	--aae-space-8: 2rem;

	/* ===== Elevation ===== */
	--aae-shadow-card:  0 2px 8px rgba(10, 46, 79, 0.10);
	--aae-shadow-float: 0 4px 14px rgba(10, 46, 79, 0.25); /* FAB, modals    */

	/* ===== Signature details ===== */
	/* Dotted separators between list items (tickets list) */
	--aae-separator: 2px dotted var(--aae-blue-200);
	/* Diagonal chevron watermark on brand backgrounds: use the logo mark at
	   low opacity — see .aae-brand-bg when components phase starts. */

	/* ===== Admin list density (WEB ONLY) =====
	 * The web is the ADMIN: long lists (~400 rows for tickets; buildings,
	 * customers, elevators alike). The app's tall icon-cards do NOT apply
	 * here — rows stay compact and scannable.
	 */
	--aae-row-h: 2.5rem;              /* 40px target row height             */
	--aae-row-px: 0.75rem;            /* horizontal cell padding            */
	--aae-row-hover: var(--aae-blue-100);
	--aae-row-separator: 1px solid #e2e7ec;
	/* Common row actions on every list screen (same order everywhere):
	   view (opens/generates PDF) | edit | delete                           */
	--aae-action-view:   var(--aae-blue-400);
	--aae-action-edit:   var(--aae-blue-700);
	--aae-action-delete: var(--aae-accent);
}