/**
 * ==================================================
 * ACE Apple UI
 * ==================================================
 *
 * Core Design System
 *
 * This stylesheet contains only the global design
 * system used by the ACE Assessment Engine.
 *
 * It defines:
 *
 * • Design Tokens
 * • Body
 * • Global Rules
 * • Typography
 * • Layout
 * • Utility Classes
 * • Responsive Rules
 *
 * All reusable UI components are implemented in
 * their own files under:
 *
 * includes/Assets/CSS/components/
 *
 * @package ACE_Assessment_Engine
 */


/* ==================================================
   DESIGN TOKENS
================================================== */

:root{

	/* -------------------------------------------------
	   Brand
	------------------------------------------------- */

	--ace-primary:#007AFF;

	/* -------------------------------------------------
	   Status Colours
	------------------------------------------------- */

	--ace-success:#34C759;
	--ace-success-light:#ECFDF5;

	--ace-warning:#FF9500;
	--ace-warning-light:#FFF7E8;

	--ace-danger:#FF3B30;
	--ace-danger-light:#FEF2F2;

	/* -------------------------------------------------
	   Surfaces
	------------------------------------------------- */

	--ace-background:#F5F5F7;

	--ace-surface:#FFFFFF;

	--ace-white:#FFFFFF;

	--ace-grey:#F7F8FA;

	/* -------------------------------------------------
	   Typography
	------------------------------------------------- */

	--ace-text:#1D1D1F;

	--ace-text-secondary:#6E6E73;

	--ace-secondary:#6E6E73;

	/* -------------------------------------------------
	   Borders
	------------------------------------------------- */

	--ace-border:#E5E5EA;

	/* -------------------------------------------------
	   Border Radius
	------------------------------------------------- */

	--ace-radius:24px;

	--ace-radius-sm:12px;

	--ace-radius-md:18px;

	--ace-radius-lg:24px;

	--ace-radius-xl:32px;

	/* -------------------------------------------------
	   Shadows
	------------------------------------------------- */

	--ace-shadow:
		0 10px 30px rgba(0,0,0,.08);

	--ace-shadow-card:
		0 6px 18px rgba(0,0,0,.06);

	/* -------------------------------------------------
	   Motion
	------------------------------------------------- */

	--ace-transition:.25s;

	/* -------------------------------------------------
	   Focus
	------------------------------------------------- */

	--ace-focus:#0A84FF;

	/* -------------------------------------------------
	   Spacing
	------------------------------------------------- */

	--ace-space-xs:8px;

	--ace-space-sm:12px;

	--ace-space-md:16px;

	--ace-space-lg:24px;

	--ace-space-xl:32px;

	--ace-space-2xl:48px;

	/* -------------------------------------------------
	   Layout
	------------------------------------------------- */

	--ace-max-width:920px;

}


/* ==================================================
   BODY
================================================== */

body{

	background:var(--ace-background);

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"SF Pro Display",
		"Segoe UI",
		sans-serif;

	color:var(--ace-text);

	line-height:1.5;

}


/* ==================================================
   GLOBAL
================================================== */

*,
*::before,
*::after{

	box-sizing:border-box;

}


/* ==================================================
   TYPOGRAPHY
================================================== */

.ace-title{

	font-size:2.375rem;

	font-weight:700;

	margin:0 0 10px;

}

.ace-subtitle{

	font-size:1.125rem;

	color:var(--ace-secondary);

	margin-bottom:30px;

}

.ace-heading{

	font-size:1.625rem;

	font-weight:600;

	margin-bottom:20px;

}


/* ==================================================
   LAYOUT
================================================== */

.ace-ae-container{

	max-width:var(--ace-max-width);

	margin:0 auto;

	padding:24px;

}


/* ==================================================
   UTILITIES
================================================== */

/*
 * Global utility classes belong here.
 *
 * Examples:
 *
 * .ace-hidden
 * .ace-text-center
 * .ace-mt-24
 * .ace-mb-24
 * .ace-flex
 * .ace-grid
 *
 * Only reusable utility classes should be added
 * to this section.
 */


/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width:768px){

	.ace-title{

		font-size:2rem;

	}

	.ace-heading{

		font-size:1.375rem;

	}

	.ace-ae-container{

		padding:20px;

	}

}