/* =============================================================
   GLOSS. Skin — Design Tokens
   Source: Penpot "Gloss website prototype" / FINAL page
   Generated: 2026-04-28
   ============================================================= */

:root {
  /* ---------- Brand colors ---------- */
  --gs-color-navy:            #1A4969;
  --gs-color-navy-deep:       #264883;
  --gs-color-magenta:         #B01CE1;
  --gs-color-cyan:            #28DFFF;
  --gs-color-fuchsia:         #E914CC;
  --gs-color-glow-pink:       #FF81EE;
  --gs-color-glow-teal:       #6CC9CF;

  /* ---------- Text ---------- */
  --gs-text-primary:          #1A4969;
  --gs-text-body:             #485E84;
  --gs-text-muted:            #536C97;
  --gs-text-form:             #434343;
  --gs-text-subtle:           #A3A4A7;
  --gs-text-subtle-alt:       #919193;
  --gs-text-inverse:          #FFFFFF;

  /* ---------- Backgrounds ---------- */
  --gs-bg-white:              #FFFFFF;
  --gs-bg-page:               #F7F9FB;
  --gs-bg-tint:               #F1F6FB;
  --gs-bg-neutral:            #F5F5F5;

  /* ---------- Borders ---------- */
  --gs-border-default:        #CED6E4;
  --gs-border-soft:           #C7CDD8;
  --gs-border-neutral:        #D9D9D9;
  --gs-border-neutral-alt:    #CECECE;

  /* ---------- Feedback ---------- */
  --gs-rating-star:           #F9DF1D;

  /* ---------- Gradients ---------- */
  --gs-gradient-primary:      linear-gradient(135deg, #28DFFF 0%, #E914CC 100%);
  --gs-gradient-primary-soft: linear-gradient(135deg, rgba(255, 0, 0, 0.5) 0%, #800AA7 100%);

  /* ---------- Type families ---------- */
  --gs-font-display:    'League Spartan', system-ui, -apple-system, sans-serif;
  --gs-font-editorial:  'Playfair Display', Georgia, serif;
  --gs-font-body:       'Heebo', system-ui, -apple-system, sans-serif;

  /* ---------- Type weights ---------- */
  --gs-weight-light:     300;
  --gs-weight-regular:   400;
  --gs-weight-medium:    500;
  --gs-weight-semibold:  600;
  --gs-weight-bold:      700;

  /* ---------- Type sizes ---------- */
  --gs-text-xs:    13px;
  --gs-text-sm:    14px;
  --gs-text-base:  16px;
  --gs-text-md:    18px;
  --gs-text-lg:    20px;
  --gs-text-xl:    24px;
  --gs-text-2xl:   32px;
  --gs-text-3xl:   40px;
  --gs-text-4xl:   48px;
  --gs-text-5xl:   58px;
  --gs-text-6xl:   64px;

  /* ---------- Line heights ---------- */
  --gs-leading-tight:   0.9375;
  --gs-leading-snug:    1.2;
  --gs-leading-normal:  1.25;
  --gs-leading-relaxed: 1.5;
  --gs-leading-loose:   1.625;
  --gs-leading-looser:  1.857;

  /* ---------- Spacing scale (4-pt) ---------- */
  --gs-space-0:    0;
  --gs-space-1:    4px;
  --gs-space-2:    8px;
  --gs-space-3:    12px;
  --gs-space-4:    16px;
  --gs-space-5:    20px;
  --gs-space-6:    24px;
  --gs-space-8:    32px;
  --gs-space-10:   40px;
  --gs-space-12:   48px;
  --gs-space-16:   64px;
  --gs-space-20:   80px;
  --gs-space-24:   96px;
  --gs-space-32:  128px;

  /* ---------- Radius ---------- */
  --gs-radius-none:  0;
  --gs-radius-sm:   20px;
  --gs-radius-md:   22px;
  --gs-radius-lg:   28px;
  --gs-radius-xl:   35px;
  --gs-radius-2xl:  40px;   /* default card */
  --gs-radius-pill: 200px;  /* full pill button */

  /* ---------- Shadows ---------- */
  --gs-shadow-card:         0 4px 31px rgba(0, 0, 0, 0.05);
  --gs-shadow-card-soft:    4px 4px 4px rgba(0, 0, 0, 0.10);
  --gs-shadow-card-faint:   4px 4px 10px rgba(0, 0, 0, 0.03);
  --gs-shadow-card-inverse: -4px -4px 10px rgba(0, 0, 0, 0.03);
  --gs-shadow-btn:          0 4px 4px rgba(0, 0, 0, 0.25);
  --gs-shadow-glow-pink:    0 0 29px #FF81EE;
  --gs-shadow-glow-teal:    0 0 39px -3px rgba(108, 201, 207, 0.30);

  /* ---------- Layout ---------- */
  --gs-canvas-width:        1728px;
  --gs-container-max:       1140px;
  --gs-section-narrow:       890px;
  --gs-card-lg:              450px;
  --gs-card-md:              370px;
  --gs-card-sm:              320px;
  --gs-card-default-h:       370px;
  --gs-header-height:        100px;
}

/* =============================================================
   Type presets — apply directly to elements
   ============================================================= */

.gs-type-hero {
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-6xl);
  font-weight: var(--gs-weight-bold);
  line-height: var(--gs-leading-tight);
  color: var(--gs-text-primary);
}

.gs-type-section-heading {
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-4xl);
  font-weight: var(--gs-weight-bold);
  line-height: var(--gs-leading-normal);
  color: var(--gs-text-primary);
}

.gs-type-subsection {
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-3xl);
  font-weight: var(--gs-weight-bold);
  line-height: var(--gs-leading-relaxed);
  color: var(--gs-text-primary);
}

.gs-type-card-heading {
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-2xl);
  font-weight: var(--gs-weight-bold);
  line-height: var(--gs-leading-snug);
  color: var(--gs-text-primary);
}

.gs-type-editorial-h1 {
  font-family: var(--gs-font-editorial);
  font-size: var(--gs-text-4xl);
  font-weight: var(--gs-weight-bold);
  line-height: var(--gs-leading-normal);
}

.gs-type-marquee {
  font-family: var(--gs-font-body);
  font-size: var(--gs-text-5xl);
  font-weight: var(--gs-weight-medium);
  line-height: var(--gs-leading-snug);
  color: var(--gs-color-magenta);
}

.gs-type-stat {
  font-family: var(--gs-font-body);
  font-size: var(--gs-text-2xl);
  font-weight: var(--gs-weight-bold);
  line-height: var(--gs-leading-snug);
}

.gs-type-price {
  font-family: var(--gs-font-body);
  font-size: var(--gs-text-4xl);
  font-weight: var(--gs-weight-semibold);
  line-height: var(--gs-leading-snug);
  color: var(--gs-color-navy-deep);
}

.gs-type-card-title {
  font-family: var(--gs-font-body);
  font-size: var(--gs-text-2xl);
  font-weight: var(--gs-weight-semibold);
  line-height: var(--gs-leading-snug);
}

.gs-type-lede {
  font-family: var(--gs-font-body);
  font-size: var(--gs-text-lg);
  font-weight: var(--gs-weight-medium);
  line-height: var(--gs-leading-snug);
}

.gs-type-blog-title {
  font-family: var(--gs-font-body);
  font-size: var(--gs-text-md);
  font-weight: var(--gs-weight-semibold);
  line-height: var(--gs-leading-snug);
  color: var(--gs-text-primary);
}

.gs-type-body {
  font-family: var(--gs-font-body);
  font-size: var(--gs-text-base);
  font-weight: var(--gs-weight-regular);
  line-height: var(--gs-leading-loose);
  color: var(--gs-text-body);
}

.gs-type-body-strong {
  font-family: var(--gs-font-body);
  font-size: var(--gs-text-base);
  font-weight: var(--gs-weight-semibold);
  line-height: var(--gs-leading-snug);
  color: var(--gs-text-body);
}

.gs-type-label {
  font-family: var(--gs-font-body);
  font-size: var(--gs-text-base);
  font-weight: var(--gs-weight-light);
  line-height: var(--gs-leading-snug);
  color: var(--gs-text-form);
}

.gs-type-button {
  font-family: var(--gs-font-body);
  font-size: var(--gs-text-base);
  font-weight: var(--gs-weight-bold);
  line-height: var(--gs-leading-snug);
  letter-spacing: 0;
}

.gs-type-button-sm {
  font-family: var(--gs-font-body);
  font-size: var(--gs-text-sm);
  font-weight: var(--gs-weight-bold);
  line-height: var(--gs-leading-snug);
}

.gs-type-link-small {
  font-family: var(--gs-font-body);
  font-size: var(--gs-text-sm);
  font-weight: var(--gs-weight-semibold);
  line-height: var(--gs-leading-snug);
}

.gs-type-fine-print {
  font-family: var(--gs-font-body);
  font-size: var(--gs-text-sm);
  font-weight: var(--gs-weight-regular);
  line-height: var(--gs-leading-looser);
  color: var(--gs-text-body);
}

.gs-type-footnote {
  font-family: var(--gs-font-body);
  font-size: var(--gs-text-sm);
  font-weight: var(--gs-weight-medium);
  line-height: var(--gs-leading-snug);
}

.gs-type-tiny {
  font-family: var(--gs-font-body);
  font-size: var(--gs-text-xs);
  font-weight: var(--gs-weight-regular);
  line-height: var(--gs-leading-snug);
}

/* =============================================================
   Component primitives
   ============================================================= */

/* Container */
.gs-container {
  width: 100%;
  max-width: var(--gs-container-max);
  margin-inline: auto;
  padding-inline: var(--gs-space-6);
}

/* Buttons */
.gs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gs-space-2);
  border: 0;
  border-radius: var(--gs-radius-pill);
  padding: 12px 28px;
  font-family: var(--gs-font-body);
  font-size: var(--gs-text-base);
  font-weight: var(--gs-weight-bold);
  line-height: 1.2;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
  text-decoration: none;
}
.gs-btn:hover { transform: translateY(-1px); box-shadow: var(--gs-shadow-btn); }
.gs-btn:active { transform: translateY(0); }

.gs-btn-primary   { background: var(--gs-gradient-primary); color: var(--gs-text-inverse); }
.gs-btn-magenta   { background: var(--gs-color-magenta);    color: var(--gs-text-inverse); }
.gs-btn-dark      { background: #000;                       color: var(--gs-text-inverse); }
.gs-btn-light     { background: var(--gs-bg-page);          color: var(--gs-text-primary); }
.gs-btn-outline   { background: transparent;                color: var(--gs-text-primary); box-shadow: inset 0 0 0 1px var(--gs-border-soft); }

.gs-btn-sm { padding: 8px 20px; font-size: var(--gs-text-sm); }
.gs-btn-lg { padding: 16px 36px; font-size: var(--gs-text-md); }

/* Card */
.gs-card {
  background: var(--gs-bg-white);
  border-radius: var(--gs-radius-2xl);
  box-shadow: var(--gs-shadow-card);
  padding: var(--gs-space-8);
}
.gs-card-tint   { background: var(--gs-bg-tint); }
.gs-card-soft   { box-shadow: var(--gs-shadow-card-soft); }
.gs-card-flat   { box-shadow: none; border: 1px solid var(--gs-border-default); }

/* Pill chip / tag */
.gs-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--gs-radius-pill);
  background: var(--gs-bg-page);
  color: var(--gs-text-muted);
  font-family: var(--gs-font-body);
  font-size: var(--gs-text-sm);
  font-weight: var(--gs-weight-medium);
}
.gs-chip-magenta { background: var(--gs-color-magenta); color: var(--gs-text-inverse); }
.gs-chip-gradient { background: var(--gs-gradient-primary); color: var(--gs-text-inverse); }

/* Input / form */
.gs-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--gs-border-default);
  border-radius: var(--gs-radius-md);
  background: var(--gs-bg-white);
  font-family: var(--gs-font-body);
  font-size: var(--gs-text-base);
  color: var(--gs-text-form);
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.gs-input:focus {
  border-color: var(--gs-color-magenta);
  box-shadow: 0 0 0 3px rgba(176, 28, 225, 0.15);
}

/* Section */
.gs-section { padding-block: var(--gs-space-24); }
.gs-section-tight { padding-block: var(--gs-space-16); }

/* Halo glow utility (decorative ellipse) */
.gs-halo-pink { box-shadow: var(--gs-shadow-glow-pink); border-radius: 50%; }
.gs-halo-teal { box-shadow: var(--gs-shadow-glow-teal); border-radius: 50%; }