/* ==================================================================
   Arctic Grey Design System — Extended Design Tokens v1.0
   ------------------------------------------------------------------
   The canonical design tokens for every Arctic Grey surface:
   web, mobile, apps, dashboards, PDF generation, and email reference.

   This extends the original email-only tokens.css to cover the
   full design system scope.

   Owner: Anthony Spallone
   Version: 1.0
   Established: April 2026
   ================================================================== */

:root {

  /* =================================================================
     COLORS — Core brand (immutable)
     ================================================================= */

  --ag-obsidian:            #0B0B0B;
  --ag-cream:               #FBF7ED;
  --ag-gold:                #C89447;

  /* =================================================================
     COLORS — Supporting neutrals
     ================================================================= */

  --ag-ink:                 #1A1A1A;
  --ag-graphite:            #6B6B6B;
  --ag-hairline:            #D9D2BF;
  --ag-muted-cream:         #E6DFC7;
  --ag-white:               #FFFFFF;
  --ag-kicker-muted:        #9E968A;
  --ag-dark-gold:           #A77328;

  /* =================================================================
     COLORS — Functional / UI states
     ================================================================= */

  --ag-success:             #1B7F4B;
  --ag-success-light:       #E8F5E9;
  --ag-warning:             #E8A317;
  --ag-warning-light:       #FFF8F0;
  --ag-warning-text:        #B47821;
  --ag-error:               #DF2F4A;
  --ag-error-light:         #FEF0F0;
  --ag-info:                #2B6CB0;
  --ag-info-light:          #EBF4FF;

  /* =================================================================
     COLORS — Dark mode surfaces
     ================================================================= */

  --ag-dark-surface-0:      #0F1117;
  --ag-dark-surface-1:      #1A1D27;
  --ag-dark-surface-2:      #252833;
  --ag-dark-border:         #2E3240;
  --ag-dark-border-subtle:  #1F2230;
  --ag-dark-text-primary:   #E8E6E1;
  --ag-dark-text-secondary: #9B9A97;
  --ag-dark-text-muted:     #6B6965;
  --ag-dark-gold:           #D4A254;

  /* =================================================================
     COLORS — Data visualization palette
     ================================================================= */

  --ag-data-1:              #C89447;  /* Gold */
  --ag-data-2:              #1B8A8A;  /* Deep Teal */
  --ag-data-3:              #4A6FA5;  /* Slate Blue */
  --ag-data-4:              #D4725C;  /* Warm Coral */
  --ag-data-5:              #7BA07E;  /* Sage */
  --ag-data-6:              #8B6C96;  /* Plum */
  --ag-data-7:              #B87845;  /* Copper */
  --ag-data-8:              #6B8299;  /* Steel */
  --ag-data-9:              #5C7A3B;  /* Moss */
  --ag-data-10:             #A65D7A;  /* Berry */
  --ag-data-11:             #C4A96D;  /* Sand */
  --ag-data-12:             #3D4F6F;  /* Midnight */

  /* =================================================================
     COLORS — Signature gold gradient (135deg)
     ================================================================= */

  --ag-gold-gradient-135: linear-gradient(
    135deg,
    #F7D379  0%,
    #E9BE65 13%,
    #F5E583 23%,
    #C89447 39%,
    #DCAB57 46%,
    #D6A453 55%,
    #F7D87B 64%,
    #A57331 74%,
    #C18D42 83%,
    #C08A41 100%
  );

  --ag-gold-gradient-90: linear-gradient(
    90deg,
    #F7D379  0%,
    #E9BE65 13%,
    #F5E583 23%,
    #C89447 39%,
    #DCAB57 46%,
    #D6A453 55%,
    #F7D87B 64%,
    #A57331 74%,
    #C18D42 83%,
    #C08A41 100%
  );

  --ag-gold-gradient-180: linear-gradient(
    180deg,
    #F7D379 0%,
    #C89447 50%,
    #A57331 100%
  );

  --ag-gold-gradient-rail: linear-gradient(
    180deg,
    #F5DC8B  0%,
    #E6C26E 35%,
    #D4A94A 100%
  );

  /* =================================================================
     TYPOGRAPHY — Families
     ================================================================= */

  --ag-font-body:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ag-font-body-email:     -apple-system, 'SF Pro Text', Inter, sans-serif;
  --ag-font-body-display:   -apple-system, 'SF Pro Display', 'SF Pro Text', Inter, Helvetica, Arial, sans-serif;
  --ag-font-serif:          'Canela', 'Didot', 'GT Sectra', 'New York', Georgia, serif;
  --ag-font-serif-short:    'Canela', 'Didot', Georgia, serif;
  --ag-font-mono:           'JetBrains Mono', 'SF Mono', 'Roboto Mono', 'Fira Code', Menlo, Consolas, monospace;

  /* =================================================================
     TYPOGRAPHY — Fluid size scale (web)
     ================================================================= */

  --ag-text-xs:             clamp(0.6875rem, 0.65rem + 0.18vw, 0.75rem);      /* 11-12px */
  --ag-text-sm:             clamp(0.75rem, 0.72rem + 0.18vw, 0.8125rem);      /* 12-13px */
  --ag-text-base:           clamp(0.9375rem, 0.9rem + 0.18vw, 1rem);          /* 15-16px */
  --ag-text-md:             clamp(1rem, 0.93rem + 0.36vw, 1.125rem);          /* 16-18px */
  --ag-text-lg:             clamp(1.125rem, 1.05rem + 0.36vw, 1.25rem);       /* 18-20px */
  --ag-text-xl:             clamp(1.375rem, 1.27rem + 0.54vw, 1.5rem);        /* 22-24px */
  --ag-text-2xl:            clamp(1.625rem, 1.37rem + 1.25vw, 2rem);          /* 26-32px */
  --ag-text-3xl:            clamp(2rem, 1.64rem + 1.79vw, 2.5rem);            /* 32-40px */
  --ag-text-4xl:            clamp(2.375rem, 1.93rem + 2.14vw, 3rem);          /* 38-48px */
  --ag-text-5xl:            clamp(2.75rem, 1.86rem + 4.46vw, 4rem);           /* 44-64px */
  --ag-text-6xl:            clamp(3.5rem, 2.43rem + 5.36vw, 5rem);            /* 56-80px */

  /* =================================================================
     TYPOGRAPHY — Fixed size scale (email, PDF)
     ================================================================= */

  --ag-size-fine:           10px;
  --ag-size-caption-xs:     11px;
  --ag-size-caption:        12px;
  --ag-size-meta:           13px;
  --ag-size-small:          14px;
  --ag-size-body:           15px;
  --ag-size-body-lg:        16px;
  --ag-size-lead:           17px;
  --ag-size-emph:           19px;
  --ag-size-section:        20px;
  --ag-size-card-title:     28px;
  --ag-size-display-sm:     32px;
  --ag-size-display:        40px;
  --ag-size-display-lg:     44px;
  --ag-size-hero:           48px;
  --ag-size-hero-xl:        64px;
  --ag-size-statement:      80px;

  /* =================================================================
     TYPOGRAPHY — Weights
     ================================================================= */

  --ag-weight-regular:      400;
  --ag-weight-medium:       500;
  --ag-weight-semibold:     600;

  /* =================================================================
     TYPOGRAPHY — Letter-spacing
     ================================================================= */

  --ag-track-kicker:        0.16em;
  --ag-track-pill:          0.18em;
  --ag-track-kicker-sm:     0.14em;
  --ag-track-hero:          -0.02em;
  --ag-track-section:       -0.01em;
  --ag-track-body:          0;
  --ag-track-small:         0.01em;

  /* =================================================================
     TYPOGRAPHY — Line heights
     ================================================================= */

  --ag-leading-tight:       1.15;
  --ag-leading-snug:        1.25;
  --ag-leading-normal:      1.55;
  --ag-leading-relaxed:     1.65;
  --ag-leading-data:        1.40;

  /* =================================================================
     SPACING — 8px base unit system
     ================================================================= */

  --ag-space-0:             0px;
  --ag-space-1:             4px;
  --ag-space-2:             8px;
  --ag-space-3:             12px;
  --ag-space-4:             16px;
  --ag-space-5:             20px;
  --ag-space-6:             24px;
  --ag-space-8:             32px;
  --ag-space-10:            40px;
  --ag-space-12:            48px;
  --ag-space-16:            64px;
  --ag-space-20:            80px;
  --ag-space-24:            96px;
  --ag-space-32:            128px;

  /* =================================================================
     LAYOUT — Breakpoints
     ================================================================= */

  --ag-bp-xs:               0px;
  --ag-bp-sm:               480px;
  --ag-bp-md:               640px;
  --ag-bp-lg:               768px;
  --ag-bp-xl:               1024px;
  --ag-bp-2xl:              1280px;
  --ag-bp-3xl:              1440px;

  /* =================================================================
     LAYOUT — Containers
     ================================================================= */

  --ag-container-xs:        480px;
  --ag-container-sm:        640px;
  --ag-container-md:        768px;
  --ag-container-lg:        1024px;
  --ag-container-xl:        1200px;
  --ag-container-2xl:       1440px;

  /* =================================================================
     BORDERS
     ================================================================= */

  --ag-border-hairline:     1px solid #D9D2BF;
  --ag-border-gold:         1px solid #C89447;
  --ag-border-subtle:       1px solid #E6DFC7;
  --ag-border-dark:         1px solid #2E3240;
  --ag-border-error:        1px solid #DF2F4A;
  --ag-border-success:      1px solid #1B7F4B;

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

  --ag-radius-none:         0px;
  --ag-radius-sm:           4px;
  --ag-radius-md:           8px;
  --ag-radius-lg:           12px;
  --ag-radius-xl:           16px;
  --ag-radius-2xl:          24px;
  --ag-radius-pill:         999px;

  /* =================================================================
     SHADOWS
     ================================================================= */

  --ag-shadow-xs:           0 1px 2px rgba(11, 11, 11, 0.04);
  --ag-shadow-sm:           0 2px 4px rgba(11, 11, 11, 0.06);
  --ag-shadow-md:           0 4px 12px rgba(11, 11, 11, 0.08);
  --ag-shadow-lg:           0 8px 24px rgba(11, 11, 11, 0.10);
  --ag-shadow-xl:           0 16px 48px rgba(11, 11, 11, 0.12);
  --ag-shadow-inner:        inset 0 1px 2px rgba(11, 11, 11, 0.06);

  /* =================================================================
     Z-INDEX
     ================================================================= */

  --ag-z-base:              0;
  --ag-z-dropdown:          100;
  --ag-z-sticky:            200;
  --ag-z-overlay:           300;
  --ag-z-modal:             400;
  --ag-z-popover:           500;
  --ag-z-toast:             600;
  --ag-z-max:               9999;

  /* =================================================================
     MOTION — Durations
     ================================================================= */

  --ag-duration-instant:    0ms;
  --ag-duration-fast:       100ms;
  --ag-duration-normal:     200ms;
  --ag-duration-slow:       300ms;
  --ag-duration-slower:     500ms;

  /* =================================================================
     MOTION — Easing curves
     ================================================================= */

  --ag-ease-out:            cubic-bezier(0.16, 1, 0.3, 1);
  --ag-ease-in:             cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ag-ease-in-out:         cubic-bezier(0.65, 0, 0.35, 1);
  --ag-ease-spring:         cubic-bezier(0.34, 1.56, 0.64, 1);

  /* =================================================================
     OPACITY — Text on dark backgrounds
     ================================================================= */

  --ag-opacity-high:        0.87;
  --ag-opacity-medium:      0.78;
  --ag-opacity-body:        0.72;
  --ag-opacity-muted:       0.50;
  --ag-opacity-disabled:    0.40;
  --ag-opacity-subtle:      0.12;

  /* =================================================================
     ASPECT RATIOS
     ================================================================= */

  --ag-ratio-square:        1 / 1;
  --ag-ratio-4-3:           4 / 3;
  --ag-ratio-3-2:           3 / 2;
  --ag-ratio-16-9:          16 / 9;
  --ag-ratio-21-9:          21 / 9;

}

/* =================================================================
   DARK MODE OVERRIDES
   ================================================================= */

@media (prefers-color-scheme: dark) {
  :root {
    --ag-surface-0:         var(--ag-dark-surface-0);
    --ag-surface-1:         var(--ag-dark-surface-1);
    --ag-surface-2:         var(--ag-dark-surface-2);
    --ag-text-primary:      var(--ag-dark-text-primary);
    --ag-text-secondary:    var(--ag-dark-text-secondary);
    --ag-text-muted:        var(--ag-dark-text-muted);
    --ag-border-default:    var(--ag-dark-border);
  }
}

/* =================================================================
   REDUCED MOTION
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}