/* ============================================================
   GROSPRINT DESIGN SYSTEM — CSS Custom Properties
   Version: alpha
   Font: Plus Jakarta Sans (Google Fonts substitute for Roobert PRO)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700&display=swap');

:root {

  /* ──────────────────────────────────────────
     FONTS
  ────────────────────────────────────────── */
  --font-primary: 'Plus Jakarta Sans', 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ──────────────────────────────────────────
     COLORS — Brand & Accent
  ────────────────────────────────────────── */
  --color-primary:           #1c1c1e;
  --color-on-primary:        #ffffff;
  --color-brand-yellow:      #ffd02f;
  --color-brand-yellow-deep: #fcb900;
  --color-yellow-light:      #fff4c4;
  --color-yellow-dark:       #746019;
  --color-brand-blue:        #4262ff;
  --color-blue-450:          #5b76fe;
  --color-blue-pressed:      #2a41b6;
  --color-brand-coral:       #ff9999;
  --color-coral-light:       #ffc6c6;
  --color-coral-dark:        #600000;
  --color-brand-rose:        #ffd8f4;
  --color-rose-light:        #fde0f0;
  --color-brand-pink:        #fde0f0;
  --color-brand-teal:        #0fbcb0;
  --color-teal-light:        #c3faf5;
  --color-moss-dark:         #187574;
  --color-brand-orange-light:#ffe6cd;
  --color-brand-red:         #fbd4d4;
  --color-brand-red-dark:    #e3c5c5;
  --color-success-accent:    #00b473;

  /* ──────────────────────────────────────────
     COLORS — Surface
  ────────────────────────────────────────── */
  --color-canvas:                  #ffffff;
  --color-surface:                 #f7f8fa;
  --color-surface-soft:            #fafbfc;
  --color-surface-yellow:          #fff8e0;
  --color-surface-pricing-featured:#f5f3ff;
  --color-hairline:                #e0e2e8;
  --color-hairline-soft:           #eef0f3;
  --color-hairline-strong:         #c7cad5;

  /* ──────────────────────────────────────────
     COLORS — Text
  ────────────────────────────────────────── */
  --color-ink-deep:     #050038;
  --color-ink:          #1c1c1e;
  --color-charcoal:     #2c2c34;
  --color-slate:        #555a6a;
  --color-steel:        #6b6f7e;
  --color-stone:        #8e91a0;
  --color-muted:        #a5a8b5;
  --color-on-dark:      #ffffff;
  --color-on-dark-muted:#a5a8b5;
  --color-footer-bg:    #1c1c1e;

  /* ──────────────────────────────────────────
     COLORS — Semantic aliases
  ────────────────────────────────────────── */
  --color-text-primary:   var(--color-ink);
  --color-text-secondary: var(--color-slate);
  --color-text-tertiary:  var(--color-steel);
  --color-text-disabled:  var(--color-muted);
  --color-text-link:      var(--color-brand-blue);
  --color-bg-page:        var(--color-canvas);
  --color-bg-subtle:      var(--color-surface);
  --color-border:         var(--color-hairline);
  --color-border-strong:  var(--color-hairline-strong);
  --color-focus-ring:     var(--color-brand-blue);

  /* ──────────────────────────────────────────
     TYPOGRAPHY — Scale
  ────────────────────────────────────────── */
  --type-hero-display-size:    80px;
  --type-hero-display-weight:  500;
  --type-hero-display-lh:      1.05;
  --type-hero-display-ls:      -2px;

  --type-display-lg-size:      60px;
  --type-display-lg-weight:    500;
  --type-display-lg-lh:        1.10;
  --type-display-lg-ls:        -1.5px;

  --type-h1-size:    48px;
  --type-h1-weight:  500;
  --type-h1-lh:      1.15;
  --type-h1-ls:      -1px;

  --type-h2-size:    36px;
  --type-h2-weight:  500;
  --type-h2-lh:      1.20;
  --type-h2-ls:      -0.5px;

  --type-h3-size:    28px;
  --type-h3-weight:  500;
  --type-h3-lh:      1.25;
  --type-h3-ls:      0px;

  --type-h4-size:    22px;
  --type-h4-weight:  500;
  --type-h4-lh:      1.30;
  --type-h4-ls:      0px;

  --type-h5-size:    18px;
  --type-h5-weight:  500;
  --type-h5-lh:      1.40;
  --type-h5-ls:      0px;

  --type-subtitle-size:    18px;
  --type-subtitle-weight:  400;
  --type-subtitle-lh:      1.50;
  --type-subtitle-ls:      0px;

  --type-body-md-size:    16px;
  --type-body-md-weight:  400;
  --type-body-md-lh:      1.50;

  --type-body-md-medium-size:   16px;
  --type-body-md-medium-weight: 500;
  --type-body-md-medium-lh:     1.50;

  --type-body-sm-size:    14px;
  --type-body-sm-weight:  400;
  --type-body-sm-lh:      1.50;

  --type-body-sm-medium-size:   14px;
  --type-body-sm-medium-weight: 500;
  --type-body-sm-medium-lh:     1.50;

  --type-caption-size:    13px;
  --type-caption-weight:  400;
  --type-caption-lh:      1.40;

  --type-caption-bold-size:    13px;
  --type-caption-bold-weight:  600;
  --type-caption-bold-lh:      1.40;

  --type-micro-size:    12px;
  --type-micro-weight:  500;
  --type-micro-lh:      1.40;

  --type-micro-uppercase-size:    11px;
  --type-micro-uppercase-weight:  600;
  --type-micro-uppercase-lh:      1.40;
  --type-micro-uppercase-ls:      0.5px;

  --type-button-md-size:    14px;
  --type-button-md-weight:  500;
  --type-button-md-lh:      1.30;

  --type-stat-display-size:    64px;
  --type-stat-display-weight:  500;
  --type-stat-display-lh:      1.10;
  --type-stat-display-ls:      -1.5px;

  /* ──────────────────────────────────────────
     SPACING
  ────────────────────────────────────────── */
  --spacing-xxs:        4px;
  --spacing-xs:         8px;
  --spacing-sm:         12px;
  --spacing-md:         16px;
  --spacing-lg:         20px;
  --spacing-xl:         24px;
  --spacing-xxl:        32px;
  --spacing-xxxl:       40px;
  --spacing-section-sm: 48px;
  --spacing-section:    64px;
  --spacing-section-lg: 96px;
  --spacing-hero:       120px;

  /* ──────────────────────────────────────────
     BORDER RADIUS
  ────────────────────────────────────────── */
  --radius-xs:      4px;
  --radius-sm:      6px;
  --radius-md:      8px;
  --radius-lg:      12px;
  --radius-xl:      16px;
  --radius-xxl:     20px;
  --radius-xxxl:    28px;
  --radius-feature: 32px;
  --radius-full:    9999px;

  /* ──────────────────────────────────────────
     ELEVATION / SHADOWS
  ────────────────────────────────────────── */
  --shadow-0:   none;
  --shadow-1:   rgba(5, 0, 56, 0.04) 0px 1px 2px 0px;
  --shadow-2:   rgba(5, 0, 56, 0.06) 0px 4px 12px 0px;
  --shadow-3:   rgba(5, 0, 56, 0.08) 0px 12px 32px -4px;
  --shadow-4:   rgba(5, 0, 56, 0.12) 0px 16px 48px -8px;

  /* ──────────────────────────────────────────
     ANIMATION
  ────────────────────────────────────────── */
  --transition-fast:   150ms ease-in-out; /* @kind other */
  --transition-base:   200ms ease-in-out; /* @kind other */
  --transition-slow:   300ms ease-in-out; /* @kind other */
}

/* ──────────────────────────────────────────
   BASE ELEMENT DEFAULTS
────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-primary);
  font-size: 16px;
  color: var(--color-ink);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ──────────────────────────────────────────
   SEMANTIC TYPOGRAPHY CLASSES
────────────────────────────────────────── */
.t-hero-display {
  font-family: var(--font-primary);
  font-size: var(--type-hero-display-size);
  font-weight: var(--type-hero-display-weight);
  line-height: var(--type-hero-display-lh);
  letter-spacing: var(--type-hero-display-ls);
}

.t-display-lg {
  font-family: var(--font-primary);
  font-size: var(--type-display-lg-size);
  font-weight: var(--type-display-lg-weight);
  line-height: var(--type-display-lg-lh);
  letter-spacing: var(--type-display-lg-ls);
}

.t-h1 {
  font-family: var(--font-primary);
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-lh);
  letter-spacing: var(--type-h1-ls);
}

.t-h2 {
  font-family: var(--font-primary);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-ls);
}

.t-h3 {
  font-family: var(--font-primary);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-lh);
}

.t-h4 {
  font-family: var(--font-primary);
  font-size: var(--type-h4-size);
  font-weight: var(--type-h4-weight);
  line-height: var(--type-h4-lh);
}

.t-h5 {
  font-family: var(--font-primary);
  font-size: var(--type-h5-size);
  font-weight: var(--type-h5-weight);
  line-height: var(--type-h5-lh);
}

.t-subtitle {
  font-family: var(--font-primary);
  font-size: var(--type-subtitle-size);
  font-weight: var(--type-subtitle-weight);
  line-height: var(--type-subtitle-lh);
}

.t-body-md {
  font-family: var(--font-primary);
  font-size: var(--type-body-md-size);
  font-weight: var(--type-body-md-weight);
  line-height: var(--type-body-md-lh);
}

.t-body-md-medium {
  font-family: var(--font-primary);
  font-size: var(--type-body-md-medium-size);
  font-weight: var(--type-body-md-medium-weight);
  line-height: var(--type-body-md-medium-lh);
}

.t-body-sm {
  font-family: var(--font-primary);
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-body-sm-weight);
  line-height: var(--type-body-sm-lh);
}

.t-body-sm-medium {
  font-family: var(--font-primary);
  font-size: var(--type-body-sm-medium-size);
  font-weight: var(--type-body-sm-medium-weight);
  line-height: var(--type-body-sm-medium-lh);
}

.t-caption {
  font-family: var(--font-primary);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
}

.t-caption-bold {
  font-family: var(--font-primary);
  font-size: var(--type-caption-bold-size);
  font-weight: var(--type-caption-bold-weight);
  line-height: var(--type-caption-bold-lh);
}

.t-micro {
  font-family: var(--font-primary);
  font-size: var(--type-micro-size);
  font-weight: var(--type-micro-weight);
  line-height: var(--type-micro-lh);
}

.t-micro-uppercase {
  font-family: var(--font-primary);
  font-size: var(--type-micro-uppercase-size);
  font-weight: var(--type-micro-uppercase-weight);
  line-height: var(--type-micro-uppercase-lh);
  letter-spacing: var(--type-micro-uppercase-ls);
  text-transform: uppercase;
}

.t-button-md {
  font-family: var(--font-primary);
  font-size: var(--type-button-md-size);
  font-weight: var(--type-button-md-weight);
  line-height: var(--type-button-md-lh);
}

.t-stat-display {
  font-family: var(--font-primary);
  font-size: var(--type-stat-display-size);
  font-weight: var(--type-stat-display-weight);
  line-height: var(--type-stat-display-lh);
  letter-spacing: var(--type-stat-display-ls);
}