/* ============================================================
   MIRO DESIGN SYSTEM — CSS Custom Properties
   Source: DESIGN-miro.md (Miro marketing surfaces)
   Font: Roobert PRO (substitute: Noto Sans via Google Fonts)
   ============================================================ */

/* ------------------------------------------------------------
   GOOGLE FONTS IMPORT
   Roobert PRO is a licensed custom typeface. Noto Sans is used
   as the nearest open-source geometric sans-serif substitute.
   ⚠ FLAG: Replace with Roobert PRO when licensed files are available.
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600&display=swap');

:root {

  /* ----------------------------------------------------------
     FONT STACK
     ---------------------------------------------------------- */
  --font-primary: "Roobert PRO", "Noto Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  /* ----------------------------------------------------------
     COLORS — Brand & Accent
     ---------------------------------------------------------- */
  --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 / Ink
     ---------------------------------------------------------- */
  --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;

  /* ----------------------------------------------------------
     COLORS — Semantic
     ---------------------------------------------------------- */
  --color-primary:     #1c1c1e;
  --color-on-primary:  #ffffff;
  --color-footer-bg:   #1c1c1e;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Scale Tokens
     ---------------------------------------------------------- */

  /* Hero Display — 80px / 500 / lh 1.05 / ls -2px */
  --type-hero-display-family:  var(--font-primary);
  --type-hero-display-size:    80px;
  --type-hero-display-weight:  500;
  --type-hero-display-lh:      1.05;
  --type-hero-display-ls:      -2px;

  /* Display LG — 60px / 500 / lh 1.10 / ls -1.5px */
  --type-display-lg-size:      60px;
  --type-display-lg-weight:    500;
  --type-display-lg-lh:        1.10;
  --type-display-lg-ls:        -1.5px;

  /* Stat Display — 64px / 500 / lh 1.10 / ls -1.5px */
  --type-stat-display-size:    64px;
  --type-stat-display-weight:  500;
  --type-stat-display-lh:      1.10;
  --type-stat-display-ls:      -1.5px;

  /* Heading 1 — 48px / 500 / lh 1.15 / ls -1px */
  --type-h1-size:    48px;
  --type-h1-weight:  500;
  --type-h1-lh:      1.15;
  --type-h1-ls:      -1px;

  /* Heading 2 — 36px / 500 / lh 1.20 / ls -0.5px */
  --type-h2-size:    36px;
  --type-h2-weight:  500;
  --type-h2-lh:      1.20;
  --type-h2-ls:      -0.5px;

  /* Heading 3 — 28px / 500 / lh 1.25 */
  --type-h3-size:    28px;
  --type-h3-weight:  500;
  --type-h3-lh:      1.25;

  /* Heading 4 — 22px / 500 / lh 1.30 */
  --type-h4-size:    22px;
  --type-h4-weight:  500;
  --type-h4-lh:      1.30;

  /* Heading 5 — 18px / 500 / lh 1.40 */
  --type-h5-size:    18px;
  --type-h5-weight:  500;
  --type-h5-lh:      1.40;

  /* Subtitle — 18px / 400 / lh 1.50 */
  --type-subtitle-size:    18px;
  --type-subtitle-weight:  400;
  --type-subtitle-lh:      1.50;

  /* Body MD — 16px / 400 / lh 1.50 */
  --type-body-md-size:    16px;
  --type-body-md-weight:  400;
  --type-body-md-lh:      1.50;

  /* Body MD Medium — 16px / 500 / lh 1.50 */
  --type-body-md-medium-weight: 500;

  /* Body SM — 14px / 400 / lh 1.50 */
  --type-body-sm-size:    14px;
  --type-body-sm-weight:  400;
  --type-body-sm-lh:      1.50;

  /* Body SM Medium — 14px / 500 */
  --type-body-sm-medium-weight: 500;

  /* Caption — 13px / 400 / lh 1.40 */
  --type-caption-size:    13px;
  --type-caption-weight:  400;
  --type-caption-lh:      1.40;

  /* Caption Bold — 13px / 600 */
  --type-caption-bold-weight: 600;

  /* Micro — 12px / 500 / lh 1.40 */
  --type-micro-size:    12px;
  --type-micro-weight:  500;
  --type-micro-lh:      1.40;

  /* Micro Uppercase — 11px / 600 / lh 1.40 / ls 0.5px */
  --type-micro-uppercase-size:   11px;
  --type-micro-uppercase-weight: 600;
  --type-micro-uppercase-lh:     1.40;
  --type-micro-uppercase-ls:     0.5px;

  /* Button MD — 14px / 500 / lh 1.30 */
  --type-button-md-size:    14px;
  --type-button-md-weight:  500;
  --type-button-md-lh:      1.30;

  /* ----------------------------------------------------------
     SPACING
     ---------------------------------------------------------- */
  --space-xxs:        4px;
  --space-xs:         8px;
  --space-sm:         12px;
  --space-md:         16px;
  --space-lg:         20px;
  --space-xl:         24px;
  --space-xxl:        32px;
  --space-xxxl:       40px;
  --space-section-sm: 48px;
  --space-section:    64px;
  --space-section-lg: 96px;
  --space-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;

}

/* ----------------------------------------------------------
   SEMANTIC ELEMENT DEFAULTS
   These apply base Miro styles to HTML elements.
   Opt in by adding class="miro" to a wrapper.
   ---------------------------------------------------------- */
.miro {
  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);
  color: var(--color-ink);
  background-color: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
}

.miro 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);
  color: var(--color-ink);
}

.miro 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);
  color: var(--color-ink);
}

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

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

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

.miro p {
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-lh);
  color: var(--color-slate);
}

.miro a {
  color: var(--color-brand-blue);
  text-decoration: none;
}

.miro code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--type-body-sm-size);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
}

/* ----------------------------------------------------------
   UTILITY CLASSES
   ---------------------------------------------------------- */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  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);
  border-radius: var(--radius-full);
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 150ms ease;
  white-space: nowrap;
}
.btn-primary   { background: var(--color-primary);      color: var(--color-on-primary); }
.btn-yellow    { background: var(--color-brand-yellow); color: var(--color-primary); }
.btn-blue      { background: var(--color-brand-blue);   color: var(--color-on-primary); }
.btn-secondary { background: transparent; color: var(--color-ink); border: 1px solid var(--color-hairline-strong); }
.btn-on-dark   { background: var(--color-on-dark);      color: var(--color-primary); }
.btn-ghost     { background: transparent; color: var(--color-ink); border-radius: var(--radius-md); padding: 8px 12px; }
.btn-link      { background: transparent; color: var(--color-brand-blue); padding: 0; border-radius: 0; font-size: var(--type-body-sm-size); }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-primary);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-bold-weight);
  line-height: var(--type-caption-lh);
  border-radius: var(--radius-full);
  padding: 4px 10px;
}
.badge-promo   { background: var(--color-brand-yellow);         color: var(--color-primary); }
.badge-yellow  { background: var(--color-surface-yellow);       color: var(--color-yellow-dark); }
.badge-purple  { background: var(--color-surface-pricing-featured); color: var(--color-brand-blue); }
.badge-coral   { background: var(--color-coral-light);          color: var(--color-coral-dark); }
.badge-success { background: var(--color-success-accent);       color: var(--color-on-primary); }
.badge-discount {
  background: var(--color-brand-yellow);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
}

/* Cards */
.card {
  background: var(--color-canvas);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  border: 1px solid var(--color-hairline-soft);
}
.card-feature {
  background: var(--color-canvas);
  border-radius: var(--radius-xxxl);
  padding: var(--space-xxl);
  border: 1px solid var(--color-hairline-soft);
}
.card-feature-yellow  { background: var(--color-brand-yellow); color: var(--color-primary); }
.card-feature-coral   { background: var(--color-coral-light);  color: var(--color-primary); }
.card-feature-teal    { background: var(--color-teal-light);   color: var(--color-primary); }
.card-feature-rose    { background: var(--color-rose-light);   color: var(--color-primary); }

/* Inputs */
.input {
  font-family: var(--font-primary);
  font-size: var(--type-body-md-size);
  color: var(--color-ink);
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  height: 44px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.input:focus { border: 2px solid var(--color-brand-blue); }
.input::placeholder { color: var(--color-muted); }

/* Typography utilities */
.text-hero    { 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); }
.text-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); }
.text-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); }
.text-h3      { font-family: var(--font-primary); font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); line-height: var(--type-h3-lh); }
.text-h4      { font-family: var(--font-primary); font-size: var(--type-h4-size); font-weight: var(--type-h4-weight); line-height: var(--type-h4-lh); }
.text-h5      { font-family: var(--font-primary); font-size: var(--type-h5-size); font-weight: var(--type-h5-weight); line-height: var(--type-h5-lh); }
.text-body    { 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); }
.text-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); }
.text-caption { font-family: var(--font-primary); font-size: var(--type-caption-size); font-weight: var(--type-caption-weight); line-height: var(--type-caption-lh); }
.text-micro   { font-family: var(--font-primary); font-size: var(--type-micro-size); font-weight: var(--type-micro-weight); line-height: var(--type-micro-lh); }
.text-stat    { 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); }

/* Color utilities */
.fg-ink       { color: var(--color-ink); }
.fg-slate     { color: var(--color-slate); }
.fg-steel     { color: var(--color-steel); }
.fg-muted     { color: var(--color-muted); }
.fg-blue      { color: var(--color-brand-blue); }
.fg-on-dark   { color: var(--color-on-dark); }
.bg-canvas    { background: var(--color-canvas); }
.bg-surface   { background: var(--color-surface); }
.bg-primary   { background: var(--color-primary); }
.bg-yellow    { background: var(--color-brand-yellow); }