/* ============================================================
   SUN WINDOW CLEANING — Color & Type Tokens
   "Where Every Window Shines."
   ============================================================ */

/* Webfont — Montserrat (Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ----------------------------------------------------------
     COLOR — Base palette
     ---------------------------------------------------------- */
  --swc-midnight-navy: #162640;   /* Primary brand */
  --swc-sun-gold:      #C8861A;   /* Accent — calls to action, highlights */
  --swc-pale-gold:     #E8A830;   /* Secondary accent — hover/glints */
  --swc-arctic-white:  #FFFFFF;   /* Pure white — sparkle */
  --swc-warm-mist:     #F0EDE8;   /* Warm cream — backgrounds */
  --swc-slate:         #475B74;   /* Body copy */

  /* Extended supporting neutrals (derived) */
  --swc-navy-900:      #0D1828;
  --swc-navy-800:      #162640;
  --swc-navy-700:      #1F3252;
  --swc-navy-600:      #2B4368;
  --swc-slate-500:     #475B74;
  --swc-slate-400:     #6A7E96;
  --swc-slate-300:     #93A2B6;
  --swc-slate-200:     #C5CEDB;
  --swc-mist-200:      #E4DFD6;
  --swc-mist-100:      #F0EDE8;
  --swc-mist-50:       #F8F6F2;

  /* Gold tints */
  --swc-gold-900:      #8E5F0E;
  --swc-gold-800:      #A87214;
  --swc-gold-700:      #C8861A;   /* = Sun Gold */
  --swc-gold-500:      #E8A830;   /* = Pale Gold */
  --swc-gold-200:      #F3D690;
  --swc-gold-100:      #FAEBC9;
  --swc-gold-50:       #FBF6EA;

  /* ----------------------------------------------------------
     COLOR — Semantic
     ---------------------------------------------------------- */
  --fg-1:        var(--swc-midnight-navy);  /* Headings, key text */
  --fg-2:        var(--swc-slate);          /* Body copy */
  --fg-3:        var(--swc-slate-400);      /* Captions, meta */
  --fg-inverse:  var(--swc-arctic-white);

  --bg-1:        var(--swc-arctic-white);   /* App background */
  --bg-2:        var(--swc-mist-100);       /* Warm section background */
  --bg-3:        var(--swc-mist-50);        /* Sub-section background */
  --bg-inverse:  var(--swc-midnight-navy);  /* Dark sections */
  --bg-card:     var(--swc-arctic-white);

  --accent:           var(--swc-sun-gold);
  --accent-hover:     var(--swc-pale-gold);
  --accent-pressed:   var(--swc-gold-800);
  --accent-soft:      var(--swc-gold-50);

  --border-1:    rgba(22, 38, 64, 0.12);    /* Subtle borders */
  --border-2:    rgba(22, 38, 64, 0.22);    /* Standard borders */
  --border-3:    rgba(22, 38, 64, 0.40);    /* Strong borders */
  --border-gold: rgba(200, 134, 26, 0.40);

  --shadow-sm:   0 1px 2px rgba(22, 38, 64, 0.06), 0 1px 1px rgba(22, 38, 64, 0.04);
  --shadow-md:   0 4px 12px rgba(22, 38, 64, 0.08), 0 2px 4px rgba(22, 38, 64, 0.05);
  --shadow-lg:   0 16px 40px rgba(22, 38, 64, 0.12), 0 4px 12px rgba(22, 38, 64, 0.06);
  --shadow-xl:   0 32px 80px rgba(22, 38, 64, 0.18), 0 8px 24px rgba(22, 38, 64, 0.08);
  --shadow-gold-glow: 0 0 0 4px rgba(232, 168, 48, 0.18);

  /* Semantic states */
  --success:     #2F7D5C;
  --warning:     #C8861A;
  --danger:      #B5413A;

  /* ----------------------------------------------------------
     RADII
     ---------------------------------------------------------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* ----------------------------------------------------------
     SPACING (4px base)
     ---------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Foundations
     ---------------------------------------------------------- */
  --font-sans: "Montserrat", ui-sans-serif, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Montserrat", ui-sans-serif, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* Tracking */
  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-base:   0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;   /* Eyebrows / labels */

  /* Type scale */
  --fs-eyebrow:    12px;
  --fs-caption:    13px;
  --fs-body-sm:    14px;
  --fs-body:       16px;
  --fs-body-lg:    18px;
  --fs-h6:         18px;
  --fs-h5:         22px;
  --fs-h4:         28px;
  --fs-h3:         36px;
  --fs-h2:         48px;
  --fs-h1:         64px;
  --fs-display:    88px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.7;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Add `class="swc-type"` to a container, or import this stylesheet
   anywhere you want default brand typography applied.
   ============================================================ */

.swc-type,
.swc-type * {
  font-family: var(--font-sans);
  color: var(--fg-2);
}

.swc-type h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
  color: var(--fg-1);
}

.swc-type h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
  color: var(--fg-1);
}

.swc-type h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--weight-semibold);
  color: var(--fg-1);
}

.swc-type h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--weight-semibold);
  color: var(--fg-1);
}

.swc-type h5, .h5 {
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  font-weight: var(--weight-semibold);
  color: var(--fg-1);
}

.swc-type h6, .h6 {
  font-size: var(--fs-h6);
  line-height: var(--lh-snug);
  font-weight: var(--weight-semibold);
  color: var(--fg-1);
}

.swc-type p, .p {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  font-weight: var(--weight-regular);
  color: var(--fg-2);
}

.swc-type .lede, .lede {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-base);
  font-weight: var(--weight-regular);
  color: var(--fg-2);
}

.swc-type .caption, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
}

.swc-type .eyebrow, .eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent);
}

.swc-type a, .link {
  color: var(--swc-navy-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--border-gold);
  transition: color .18s ease, text-decoration-color .18s ease;
}
.swc-type a:hover, .link:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}