/* ==========================================================================
   AUG DESIGN SYSTEM
   ========================================================================== */


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

:root {

    /* ----------------------------------------------------------------------
       BRAND COLOURS
       ---------------------------------------------------------------------- */

    --aug-color-primary: #00aeef;
    --aug-color-secondary: #fdb913;


    /* ----------------------------------------------------------------------
       NEUTRAL COLOURS
       ---------------------------------------------------------------------- */

    --aug-color-white: #ffffff;
    --aug-color-black: #000000;

    --aug-color-gray-50: #f9fafb;
    --aug-color-gray-100: #f3f4f6;
    --aug-color-gray-200: #e5e7eb;
    --aug-color-gray-300: #d1d5db;
    --aug-color-gray-400: #9ca3af;
    --aug-color-gray-500: #6b7280;
    --aug-color-gray-600: #4b5563;
    --aug-color-gray-700: #374151;
    --aug-color-gray-800: #1f2937;
    --aug-color-gray-900: #111827;


    /* ----------------------------------------------------------------------
       SEMANTIC COLOURS
       ---------------------------------------------------------------------- */

    --aug-color-success: #16a34a;
    --aug-color-warning: #f59e0b;
    --aug-color-error: #dc2626;
    --aug-color-info: #0284c7;


    /* ----------------------------------------------------------------------
       SPACING
       ---------------------------------------------------------------------- */

    --aug-space-0: 0;
    --aug-space-xs: 4px;
    --aug-space-sm: 8px;
    --aug-space-md: 16px;
    --aug-space-lg: 24px;
    --aug-space-xl: 32px;
    --aug-space-xxl: 48px;
    --aug-space-3xl: 64px;


    /* ----------------------------------------------------------------------
       FONT SIZE

       Currently reference values only.
       They do not change public website typography.
       ---------------------------------------------------------------------- */

    --aug-font-xs: 0.75rem;
    --aug-font-sm: 0.875rem;
    --aug-font-md: 1rem;
    --aug-font-lg: 1.125rem;
    --aug-font-xl: 1.25rem;
    --aug-font-xxl: 1.5rem;
    --aug-font-3xl: 1.875rem;
    --aug-font-4xl: 2.25rem;
    --aug-font-5xl: 3rem;


    /* Line Height */
    --aug-line-height-none: 1;
    --aug-line-height-tight: 1.2;
    --aug-line-height-snug: 1.35;
    --aug-line-height-normal: 1.5;
    --aug-line-height-relaxed: 1.65;
    --aug-line-height-loose: 1.8;


    /* ----------------------------------------------------------------------
       BORDER RADIUS
       ---------------------------------------------------------------------- */

    --aug-radius-none: 0;
    --aug-radius-xs: 4px;
    --aug-radius-sm: 6px;
    --aug-radius-md: 8px;
    --aug-radius-lg: 12px;
    --aug-radius-xl: 16px;
    --aug-radius-xxl: 24px;
    --aug-radius-full: 9999px;


    /* ----------------------------------------------------------------------
       SHADOW
       ---------------------------------------------------------------------- */

    --aug-shadow-none: none;
    --aug-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --aug-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --aug-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --aug-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);
    --aug-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.12);
    --aug-shadow-xxl: 0 24px 60px rgba(0, 0, 0, 0.16);
}

/* ==========================================================================
   DISPLAY
   ========================================================================== */

.aug-d-none {
    display: none;
}

.aug-d-block {
    display: block;
}

.aug-d-inline {
    display: inline;
}

.aug-d-inline-block {
    display: inline-block;
}

.aug-d-flex {
    display: flex;
}

.aug-d-inline-flex {
    display: inline-flex;
}

.aug-d-grid {
    display: grid;
}

/* ==========================================================================
   FLEX
   ========================================================================== */


/* Direction */

.aug-flex-row {
    flex-direction: row;
}

.aug-flex-row-reverse {
    flex-direction: row-reverse;
}

.aug-flex-column {
    flex-direction: column;
}

.aug-flex-column-reverse {
    flex-direction: column-reverse;
}


/* Wrap */

.aug-flex-wrap {
    flex-wrap: wrap;
}

.aug-flex-nowrap {
    flex-wrap: nowrap;
}

.aug-flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}


/* Justify Content */

.aug-justify-start {
    justify-content: flex-start;
}

.aug-justify-center {
    justify-content: center;
}

.aug-justify-end {
    justify-content: flex-end;
}

.aug-justify-between {
    justify-content: space-between;
}

.aug-justify-around {
    justify-content: space-around;
}

.aug-justify-evenly {
    justify-content: space-evenly;
}


/* Align Items */

.aug-align-start {
    align-items: flex-start;
}

.aug-align-center {
    align-items: center;
}

.aug-align-end {
    align-items: flex-end;
}

.aug-align-stretch {
    align-items: stretch;
}

.aug-align-baseline {
    align-items: baseline;
}


/* Align Self */

.aug-align-self-start {
    align-self: flex-start;
}

.aug-align-self-center {
    align-self: center;
}

.aug-align-self-end {
    align-self: flex-end;
}

.aug-align-self-stretch {
    align-self: stretch;
}


/* Flex Items */

.aug-flex-1 {
    flex: 1;
}

.aug-flex-auto {
    flex: 1 1 auto;
}

.aug-flex-none {
    flex: none;
}

.aug-grow-0 {
    flex-grow: 0;
}

.aug-grow-1 {
    flex-grow: 1;
}

.aug-shrink-0 {
    flex-shrink: 0;
}

.aug-shrink-1 {
    flex-shrink: 1;
}

/* ==========================================================================
   GAP
   ========================================================================== */

.aug-gap-0 {
    gap: var(--aug-space-0);
}

.aug-gap-xs {
    gap: var(--aug-space-xs);
}

.aug-gap-sm {
    gap: var(--aug-space-sm);
}

.aug-gap-md {
    gap: var(--aug-space-md);
}

.aug-gap-lg {
    gap: var(--aug-space-lg);
}

.aug-gap-xl {
    gap: var(--aug-space-xl);
}

.aug-gap-xxl {
    gap: var(--aug-space-xxl);
}

.aug-gap-3xl {
    gap: var(--aug-space-3xl);
}

/* ==========================================================================
   COLOURS
   ========================================================================== */


/* Text */

.aug-text-primary {
    color: var(--aug-color-primary);
}

.aug-text-secondary {
    color: var(--aug-color-secondary);
}

.aug-text-white {
    color: var(--aug-color-white);
}

.aug-text-black {
    color: var(--aug-color-black);
}

.aug-text-muted {
    color: var(--aug-color-gray-500);
}

.aug-text-success {
    color: var(--aug-color-success);
}

.aug-text-warning {
    color: var(--aug-color-warning);
}

.aug-text-error {
    color: var(--aug-color-error);
}

.aug-text-info {
    color: var(--aug-color-info);
}


/* Background */

.aug-bg-primary {
    background-color: var(--aug-color-primary);
}

.aug-bg-secondary {
    background-color: var(--aug-color-secondary);
}

.aug-bg-white {
    background-color: var(--aug-color-white);
}

.aug-bg-black {
    background-color: var(--aug-color-black);
}

.aug-bg-light {
    background-color: var(--aug-color-gray-50);
}

.aug-bg-success {
    background-color: var(--aug-color-success);
}

.aug-bg-warning {
    background-color: var(--aug-color-warning);
}

.aug-bg-error {
    background-color: var(--aug-color-error);
}

.aug-bg-info {
    background-color: var(--aug-color-info);
}

/* ==========================================================================
   BORDER RADIUS
   ========================================================================== */

.aug-rounded-none {
    border-radius: var(--aug-radius-none);
}

.aug-rounded-xs {
    border-radius: var(--aug-radius-xs);
}

.aug-rounded-sm {
    border-radius: var(--aug-radius-sm);
}

.aug-rounded-md {
    border-radius: var(--aug-radius-md);
}

.aug-rounded-lg {
    border-radius: var(--aug-radius-lg);
}

.aug-rounded-xl {
    border-radius: var(--aug-radius-xl);
}

.aug-rounded-xxl {
    border-radius: var(--aug-radius-xxl);
}

.aug-rounded-full {
    border-radius: var(--aug-radius-full);
}


/* ==========================================================================
   SHADOW
   ========================================================================== */

.aug-shadow-none {
    box-shadow: var(--aug-shadow-none);
}

.aug-shadow-xs {
    box-shadow: var(--aug-shadow-xs);
}

.aug-shadow-sm {
    box-shadow: var(--aug-shadow-sm);
}

.aug-shadow-md {
    box-shadow: var(--aug-shadow-md);
}

.aug-shadow-lg {
    box-shadow: var(--aug-shadow-lg);
}

.aug-shadow-xl {
    box-shadow: var(--aug-shadow-xl);
}

.aug-shadow-xxl {
    box-shadow: var(--aug-shadow-xxl);
}

/* ==========================================================================
   TYPOGRAPHY PREVIEW
   Fisher only via .aug-font-preview body class.
   ========================================================================== */

.aug-font-preview {
    font-size: var(--aug-font-md);
}

.aug-font-preview h1 {
    font-size: var(--aug-font-5xl);
}

.aug-font-preview h2 {
    font-size: var(--aug-font-4xl);
}

.aug-font-preview h3 {
    font-size: var(--aug-font-3xl);
}

.aug-font-preview h4 {
    font-size: var(--aug-font-xxl);
}

.aug-font-preview h5 {
    font-size: var(--aug-font-xl);
}

.aug-font-preview h6 {
    font-size: var(--aug-font-lg);
}

.aug-font-preview {
    font-size: var(--aug-font-md);
    line-height: var(--aug-line-height-normal);
}

.aug-font-preview h1,
.aug-font-preview h2 {
    line-height: var(--aug-line-height-tight);
}

.aug-font-preview h3,
.aug-font-preview h4,
.aug-font-preview h5,
.aug-font-preview h6 {
    line-height: var(--aug-line-height-snug);
}

.aug-font-preview p {
    line-height: var(--aug-line-height-relaxed);
}

/* ==========================================================================
   PADDING
   ========================================================================== */

/* All sides */

.aug-p-0 {
    padding: var(--aug-space-0);
}

.aug-p-xs {
    padding: var(--aug-space-xs);
}

.aug-p-sm {
    padding: var(--aug-space-sm);
}

.aug-p-md {
    padding: var(--aug-space-md);
}

.aug-p-lg {
    padding: var(--aug-space-lg);
}

.aug-p-xl {
    padding: var(--aug-space-xl);
}

.aug-p-xxl {
    padding: var(--aug-space-xxl);
}

.aug-p-3xl {
    padding: var(--aug-space-3xl);
}


/* Horizontal */

.aug-px-0 {
    padding-left: var(--aug-space-0);
    padding-right: var(--aug-space-0);
}

.aug-px-xs {
    padding-left: var(--aug-space-xs);
    padding-right: var(--aug-space-xs);
}

.aug-px-sm {
    padding-left: var(--aug-space-sm);
    padding-right: var(--aug-space-sm);
}

.aug-px-md {
    padding-left: var(--aug-space-md);
    padding-right: var(--aug-space-md);
}

.aug-px-lg {
    padding-left: var(--aug-space-lg);
    padding-right: var(--aug-space-lg);
}

.aug-px-xl {
    padding-left: var(--aug-space-xl);
    padding-right: var(--aug-space-xl);
}

.aug-px-xxl {
    padding-left: var(--aug-space-xxl);
    padding-right: var(--aug-space-xxl);
}

.aug-px-3xl {
    padding-left: var(--aug-space-3xl);
    padding-right: var(--aug-space-3xl);
}


/* Vertical */

.aug-py-0 {
    padding-top: var(--aug-space-0);
    padding-bottom: var(--aug-space-0);
}

.aug-py-xs {
    padding-top: var(--aug-space-xs);
    padding-bottom: var(--aug-space-xs);
}

.aug-py-sm {
    padding-top: var(--aug-space-sm);
    padding-bottom: var(--aug-space-sm);
}

.aug-py-md {
    padding-top: var(--aug-space-md);
    padding-bottom: var(--aug-space-md);
}

.aug-py-lg {
    padding-top: var(--aug-space-lg);
    padding-bottom: var(--aug-space-lg);
}

.aug-py-xl {
    padding-top: var(--aug-space-xl);
    padding-bottom: var(--aug-space-xl);
}

.aug-py-xxl {
    padding-top: var(--aug-space-xxl);
    padding-bottom: var(--aug-space-xxl);
}

.aug-py-3xl {
    padding-top: var(--aug-space-3xl);
    padding-bottom: var(--aug-space-3xl);
}

/* Top */

.aug-pt-0   { padding-top: var(--aug-space-0); }
.aug-pt-xs  { padding-top: var(--aug-space-xs); }
.aug-pt-sm  { padding-top: var(--aug-space-sm); }
.aug-pt-md  { padding-top: var(--aug-space-md); }
.aug-pt-lg  { padding-top: var(--aug-space-lg); }
.aug-pt-xl  { padding-top: var(--aug-space-xl); }
.aug-pt-xxl { padding-top: var(--aug-space-xxl); }
.aug-pt-3xl { padding-top: var(--aug-space-3xl); }

/* Right */

.aug-pr-0   { padding-right: var(--aug-space-0); }
.aug-pr-xs  { padding-right: var(--aug-space-xs); }
.aug-pr-sm  { padding-right: var(--aug-space-sm); }
.aug-pr-md  { padding-right: var(--aug-space-md); }
.aug-pr-lg  { padding-right: var(--aug-space-lg); }
.aug-pr-xl  { padding-right: var(--aug-space-xl); }
.aug-pr-xxl { padding-right: var(--aug-space-xxl); }
.aug-pr-3xl { padding-right: var(--aug-space-3xl); }

/* Bottom */

.aug-pb-0   { padding-bottom: var(--aug-space-0); }
.aug-pb-xs  { padding-bottom: var(--aug-space-xs); }
.aug-pb-sm  { padding-bottom: var(--aug-space-sm); }
.aug-pb-md  { padding-bottom: var(--aug-space-md); }
.aug-pb-lg  { padding-bottom: var(--aug-space-lg); }
.aug-pb-xl  { padding-bottom: var(--aug-space-xl); }
.aug-pb-xxl { padding-bottom: var(--aug-space-xxl); }
.aug-pb-3xl { padding-bottom: var(--aug-space-3xl); }

/* Left */

.aug-pl-0   { padding-left: var(--aug-space-0); }
.aug-pl-xs  { padding-left: var(--aug-space-xs); }
.aug-pl-sm  { padding-left: var(--aug-space-sm); }
.aug-pl-md  { padding-left: var(--aug-space-md); }
.aug-pl-lg  { padding-left: var(--aug-space-lg); }
.aug-pl-xl  { padding-left: var(--aug-space-xl); }
.aug-pl-xxl { padding-left: var(--aug-space-xxl); }
.aug-pl-3xl { padding-left: var(--aug-space-3xl); }

/* ==========================================================================
   MARGIN
   ========================================================================== */

/* All sides */

.aug-m-0   { margin: var(--aug-space-0); }
.aug-m-xs  { margin: var(--aug-space-xs); }
.aug-m-sm  { margin: var(--aug-space-sm); }
.aug-m-md  { margin: var(--aug-space-md); }
.aug-m-lg  { margin: var(--aug-space-lg); }
.aug-m-xl  { margin: var(--aug-space-xl); }
.aug-m-xxl { margin: var(--aug-space-xxl); }
.aug-m-3xl { margin: var(--aug-space-3xl); }

/* Horizontal */

.aug-mx-0   { margin-left: var(--aug-space-0); margin-right: var(--aug-space-0); }
.aug-mx-xs  { margin-left: var(--aug-space-xs); margin-right: var(--aug-space-xs); }
.aug-mx-sm  { margin-left: var(--aug-space-sm); margin-right: var(--aug-space-sm); }
.aug-mx-md  { margin-left: var(--aug-space-md); margin-right: var(--aug-space-md); }
.aug-mx-lg  { margin-left: var(--aug-space-lg); margin-right: var(--aug-space-lg); }
.aug-mx-xl  { margin-left: var(--aug-space-xl); margin-right: var(--aug-space-xl); }
.aug-mx-xxl { margin-left: var(--aug-space-xxl); margin-right: var(--aug-space-xxl); }
.aug-mx-3xl { margin-left: var(--aug-space-3xl); margin-right: var(--aug-space-3xl); }

/* Vertical */

.aug-my-0   { margin-top: var(--aug-space-0); margin-bottom: var(--aug-space-0); }
.aug-my-xs  { margin-top: var(--aug-space-xs); margin-bottom: var(--aug-space-xs); }
.aug-my-sm  { margin-top: var(--aug-space-sm); margin-bottom: var(--aug-space-sm); }
.aug-my-md  { margin-top: var(--aug-space-md); margin-bottom: var(--aug-space-md); }
.aug-my-lg  { margin-top: var(--aug-space-lg); margin-bottom: var(--aug-space-lg); }
.aug-my-xl  { margin-top: var(--aug-space-xl); margin-bottom: var(--aug-space-xl); }
.aug-my-xxl { margin-top: var(--aug-space-xxl); margin-bottom: var(--aug-space-xxl); }
.aug-my-3xl { margin-top: var(--aug-space-3xl); margin-bottom: var(--aug-space-3xl); }

/* Top */

.aug-mt-0   { margin-top: var(--aug-space-0); }
.aug-mt-xs  { margin-top: var(--aug-space-xs); }
.aug-mt-sm  { margin-top: var(--aug-space-sm); }
.aug-mt-md  { margin-top: var(--aug-space-md); }
.aug-mt-lg  { margin-top: var(--aug-space-lg); }
.aug-mt-xl  { margin-top: var(--aug-space-xl); }
.aug-mt-xxl { margin-top: var(--aug-space-xxl); }
.aug-mt-3xl { margin-top: var(--aug-space-3xl); }

/* Right */

.aug-mr-0   { margin-right: var(--aug-space-0); }
.aug-mr-xs  { margin-right: var(--aug-space-xs); }
.aug-mr-sm  { margin-right: var(--aug-space-sm); }
.aug-mr-md  { margin-right: var(--aug-space-md); }
.aug-mr-lg  { margin-right: var(--aug-space-lg); }
.aug-mr-xl  { margin-right: var(--aug-space-xl); }
.aug-mr-xxl { margin-right: var(--aug-space-xxl); }
.aug-mr-3xl { margin-right: var(--aug-space-3xl); }

/* Bottom */

.aug-mb-0   { margin-bottom: var(--aug-space-0); }
.aug-mb-xs  { margin-bottom: var(--aug-space-xs); }
.aug-mb-sm  { margin-bottom: var(--aug-space-sm); }
.aug-mb-md  { margin-bottom: var(--aug-space-md); }
.aug-mb-lg  { margin-bottom: var(--aug-space-lg); }
.aug-mb-xl  { margin-bottom: var(--aug-space-xl); }
.aug-mb-xxl { margin-bottom: var(--aug-space-xxl); }
.aug-mb-3xl { margin-bottom: var(--aug-space-3xl); }

/* Left */

.aug-ml-0   { margin-left: var(--aug-space-0); }
.aug-ml-xs  { margin-left: var(--aug-space-xs); }
.aug-ml-sm  { margin-left: var(--aug-space-sm); }
.aug-ml-md  { margin-left: var(--aug-space-md); }
.aug-ml-lg  { margin-left: var(--aug-space-lg); }
.aug-ml-xl  { margin-left: var(--aug-space-xl); }
.aug-ml-xxl { margin-left: var(--aug-space-xxl); }
.aug-ml-3xl { margin-left: var(--aug-space-3xl); }

.aug-mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.aug-ml-auto {
    margin-left: auto;
}

.aug-mr-auto {
    margin-right: auto;
}