/* ==========================================================================
   VARIABLES.CSS — Design Tokens
   AutoDM | Edit this file to update the global design system
   ========================================================================== */

:root {
  /* ── Brand Gradient ──────────────────────────────── */
  --brand-gradient: linear-gradient(45deg, #833ab4, #fd1d1d, #fcb045);
  --aurora-gradient: linear-gradient(135deg, #833ab4 0%, #bb0417 50%, #ffb95d 100%);
  --instagram-gradient: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);

  /* ── Core Colors ─────────────────────────────────── */
  --color-primary:               #691c9a;
  --color-primary-container:     #833ab4;
  --color-primary-fixed:         #f4daff;
  --color-primary-fixed-dim:     #e3b5ff;
  --color-on-primary:            #ffffff;
  --color-on-primary-fixed:      #2f004c;
  --color-on-primary-fixed-variant: #6a1c9b;
  --color-inverse-primary:       #e3b5ff;

  --color-secondary:             #bb0417;
  --color-secondary-container:   #df2b2d;
  --color-secondary-fixed:       #ffdad6;
  --color-secondary-fixed-dim:   #ffb3ac;
  --color-on-secondary:          #ffffff;
  --color-on-secondary-fixed:    #410003;
  --color-on-secondary-fixed-variant: #93000f;
  --color-on-secondary-container: #fffbff;

  --color-tertiary:              #643e00;
  --color-tertiary-container:    #845300;
  --color-tertiary-fixed:        #ffddb7;
  --color-tertiary-fixed-dim:    #ffb95d;
  --color-on-tertiary:           #ffffff;
  --color-on-tertiary-fixed:     #2a1700;
  --color-on-tertiary-fixed-variant: #653e00;
  --color-on-tertiary-container: #ffcf97;

  --color-error:                 #ba1a1a;
  --color-error-container:       #ffdad6;
  --color-on-error:              #ffffff;
  --color-on-error-container:    #93000a;

  /* ── Surface & Background ────────────────────────── */
  --color-background:            #fcf9f8;
  --color-on-background:         #1c1b1b;
  --color-surface:               #fcf9f8;
  --color-surface-bright:        #fcf9f8;
  --color-surface-dim:           #dcd9d9;
  --color-surface-tint:          #833ab4;
  --color-surface-variant:       #e5e2e1;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f6f3f2;
  --color-surface-container:     #f0edec;
  --color-surface-container-high: #ebe7e7;
  --color-surface-container-highest: #e5e2e1;
  --color-on-surface:            #1c1b1b;
  --color-on-surface-variant:    #4d4351;
  --color-inverse-surface:       #313030;
  --color-inverse-on-surface:    #f3f0ef;

  --color-outline:               #7f7383;
  --color-outline-variant:       #d0c2d3;

  /* ── Typography ──────────────────────────────────── */
  --font-base: 'Plus Jakarta Sans', sans-serif;

  --text-display-lg-size:   64px;
  --text-display-lg-height: 72px;
  --text-display-lg-weight: 800;
  --text-display-lg-spacing: -0.02em;

  --text-headline-lg-size:   40px;
  --text-headline-lg-height: 48px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-spacing: -0.01em;

  --text-headline-mobile-size:   32px;
  --text-headline-mobile-height: 40px;
  --text-headline-mobile-weight: 700;

  --text-title-md-size:   20px;
  --text-title-md-height: 28px;
  --text-title-md-weight: 600;

  --text-body-lg-size:   18px;
  --text-body-lg-height: 28px;
  --text-body-lg-weight: 400;

  --text-body-md-size:   16px;
  --text-body-md-height: 24px;
  --text-body-md-weight: 400;

  --text-label-sm-size:   14px;
  --text-label-sm-height: 20px;
  --text-label-sm-weight: 600;

  /* ── Spacing ─────────────────────────────────────── */
  --space-unit:           8px;
  --space-gutter:         24px;
  --space-margin-mobile:  20px;
  --space-margin-desktop: 64px;
  --container-max:        1440px;

  /* ── Border Radius ───────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-4xl:  40px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(105,28,154,0.12);
  --shadow-lg:  0 8px 32px rgba(105,28,154,0.18);
  --shadow-xl:  0 16px 64px rgba(105,28,154,0.22);

  /* ── Transitions ─────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ── Sidebar ─────────────────────────────────────── */
  --sidebar-width: 280px;
  --topbar-height: 80px;
}