/* =============================================================
   miio Design System — Colors & Type
   Source: miio design system - variáveis e estilos.fig
   ============================================================= */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("assets/fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype-variations"),
       url("assets/fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("assets/fonts/Geist-VariableFont_wght.ttf") format("truetype-variations"),
       url("assets/fonts/Geist-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ──────────────────────────────────────────────────────────────
   PRIMITIVE PALETTE
   ────────────────────────────────────────────────────────────── */
:root {
  /* Neutrals (slate-green grays) */
  --miio-neutral-0:    #FFFFFF;
  --miio-neutral-25:   #F2F6F6;  /* canvas background (light) */
  --miio-neutral-50:   #E8EEEE;  /* subtle border / hairline */
  --miio-neutral-100:  #D4DCDC;  /* input border, dividers */
  --miio-neutral-200:  #B8C4C4;  /* muted text on dark */
  --miio-neutral-300:  #94A0A0;  /* placeholder */
  --miio-neutral-400:  #6E7E7E;  /* muted text */
  --miio-neutral-500:  #566363;  /* body secondary */
  --miio-neutral-600:  #3E4D4D;  /* body deep */
  --miio-neutral-700:  #2C3A3A;  /* ink / heading (dark surf) */
  --miio-neutral-800:  #1C2828;  /* primary ink / surface dark */
  --miio-neutral-900:  #111919;  /* canvas background (dark) */

  /* Brand — Teal (primary) */
  --miio-teal-50:   #E6F5F2;
  --miio-teal-100:  #C2E5DE;
  --miio-teal-200:  #8CCEC1;
  --miio-teal-300:  #4AB9A5;
  --miio-teal-500:  #0C7D6F;  /* primary default */
  --miio-teal-600:  #0A6B5F;  /* primary hover */
  --miio-teal-700:  #074A42;  /* primary deep */
  --miio-teal-accent: #2BCFB8; /* mint accent */

  /* Business — navy */
  --miio-navy-50:   #E7EEF7;
  --miio-navy-100:  #BFD3EA;
  --miio-navy-500:  #0E4A88;  /* business */
  --miio-navy-600:  #0B3C6E;
  --miio-navy-700:  #082B50;

  /* Status — Error */
  --miio-red-50:   #FFF4F4;
  --miio-red-100:  #FCCACA;
  --miio-red-400:  #EE7070;
  --miio-red-500:  #D23838;  /* error default */
  --miio-red-600:  #B82C2C;  /* error deep */
  --miio-red-900:  #580C0C;  /* error on-dark surface */

  /* Status — Success */
  --miio-green-50:   #ECF7EF;
  --miio-green-100:  #C9EBD5;
  --miio-green-400:  #72CFA0;
  --miio-green-500:  #42B87A;
  --miio-green-600:  #2E9A62;  /* success default */
  --miio-green-900:  #0C4429;

  /* Status — Warning / Promotional */
  --miio-amber-400:  #F2C030;
  --miio-amber-500:  #EAB020;
  --miio-amber-600:  #C8880C;  /* warning default */
  --miio-orange-500: #E38047;  /* promotional */
  --miio-orange-700: #974211;

  /* Status — Info (blue) */
  --miio-blue-400: #5AA2F0;
  --miio-blue-600: #1C6AAE;    /* info default */

  /* Purple */
  --miio-purple-400: #D172E6;
  --miio-purple-600: #9523AF;

  /* Chart palette (1 – 9) */
  --miio-chart-1: #EAB020;
  --miio-chart-2: #0C7D6F;
  --miio-chart-3: #5AA2F0;
  --miio-chart-4: #2E9A62;
  --miio-chart-5: #D23838;
  --miio-chart-6: #9523AF;
  --miio-chart-7: #E38047;
  --miio-chart-8: #2BCFB8;
  --miio-chart-9: #566363;
}

/* ──────────────────────────────────────────────────────────────
   SEMANTIC TOKENS — LIGHT (default)
   ────────────────────────────────────────────────────────────── */
:root,
[data-theme="light"] {
  /* Surfaces */
  --surface-canvas:           var(--miio-neutral-25);   /* page bg */
  --surface-card:             var(--miio-neutral-0);    /* cards */
  --surface-raised:           var(--miio-neutral-0);    /* elevated */
  --surface-secondary:        var(--miio-neutral-25);
  --surface-wallet:           var(--miio-neutral-0);
  --surface-input:            var(--miio-neutral-25);
  --surface-footer:           var(--miio-neutral-800);
  --surface-tooltip:          var(--miio-neutral-700);
  --surface-toast:            var(--miio-neutral-700);
  --surface-primary-soft:     var(--miio-teal-50);
  --surface-status-error-soft:   #FFF4F4;
  --surface-status-success-soft: #ECF7EF;
  --surface-status-warning-soft: #FFF7E0;
  --surface-status-info-soft:    #E6F0FB;
  --surface-status-neutral-soft: var(--miio-neutral-25);
  --surface-status-promotional-soft: #FCECDF;

  /* Borders */
  --border-subtle:      var(--miio-neutral-50);
  --border-default:     var(--miio-neutral-100);
  --border-strong:      var(--miio-neutral-200);
  --border-primary:     var(--miio-teal-500);
  --border-error:       var(--miio-red-500);
  --border-success:     #42B87A;
  --border-focus:       var(--miio-teal-500);

  /* Text */
  --text-heading:       var(--miio-neutral-800);
  --text-primary:       var(--miio-neutral-700);
  --text-body:          var(--miio-neutral-700);
  --text-body-deep:     var(--miio-neutral-600);
  --text-muted:         var(--miio-neutral-500);
  --text-subtle:        var(--miio-neutral-400);
  --text-disabled:      var(--miio-neutral-300);
  --text-placeholder:   var(--miio-neutral-300);
  --text-link:          var(--miio-blue-600);
  --text-on-dark:       var(--miio-neutral-0);
  --text-on-primary:    var(--miio-neutral-0);
  --text-on-footer:     var(--miio-neutral-0);

  --text-error:         var(--miio-red-500);
  --text-error-deep:    var(--miio-red-600);
  --text-success:       var(--miio-green-600);
  --text-warning:       var(--miio-amber-600);
  --text-info:          var(--miio-blue-600);
  --text-promotional:   var(--miio-orange-700);
  --text-purple:        var(--miio-purple-600);
  --text-business:      var(--miio-teal-accent);

  /* Actions */
  --action-primary:          var(--miio-teal-500);
  --action-primary-hover:    var(--miio-teal-600);
  --action-primary-deep:     var(--miio-teal-700);
  --action-secondary:        var(--miio-neutral-0);
  --action-ghost:            transparent;
  --action-destructive:      var(--miio-red-500);
  --action-business:         var(--miio-teal-accent);
  --action-purple:           var(--miio-purple-600);
  --action-promotional:      var(--miio-orange-500);
  --action-disabled-bg:      var(--miio-neutral-50);
  --action-disabled-fg:      var(--miio-neutral-300);
}

/* ──────────────────────────────────────────────────────────────
   SEMANTIC TOKENS — DARK
   ────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --surface-canvas:           var(--miio-neutral-900);
  --surface-card:             var(--miio-neutral-800);
  --surface-raised:           var(--miio-neutral-700);
  --surface-secondary:        var(--miio-neutral-800);
  --surface-wallet:           var(--miio-neutral-800);
  --surface-input:            var(--miio-neutral-700);
  --surface-footer:           var(--miio-neutral-800);
  --surface-tooltip:          var(--miio-neutral-50);
  --surface-toast:            var(--miio-neutral-50);
  --surface-primary-soft:     #0C4439;
  --surface-status-error-soft:   #580C0C;
  --surface-status-success-soft: #0C4429;
  --surface-status-warning-soft: #3A2A05;
  --surface-status-info-soft:    #0F2A48;
  --surface-status-neutral-soft: var(--miio-neutral-700);
  --surface-status-promotional-soft: #3A1E0E;

  --border-subtle:      var(--miio-neutral-700);
  --border-default:     var(--miio-neutral-600);
  --border-strong:      var(--miio-neutral-500);
  --border-primary:     var(--miio-teal-accent);
  --border-error:       var(--miio-red-400);
  --border-success:     var(--miio-green-400);
  --border-focus:       var(--miio-teal-accent);

  --text-heading:       var(--miio-neutral-25);
  --text-primary:       var(--miio-neutral-25);
  --text-body:          var(--miio-neutral-25);
  --text-body-deep:     var(--miio-neutral-200);
  --text-muted:         var(--miio-neutral-200);
  --text-subtle:        var(--miio-neutral-300);
  --text-disabled:      var(--miio-neutral-400);
  --text-placeholder:   var(--miio-neutral-400);
  --text-link:          var(--miio-blue-400);
  --text-on-dark:       var(--miio-neutral-25);
  --text-on-primary:    var(--miio-neutral-0);
  --text-on-footer:     var(--miio-neutral-25);

  --text-error:         var(--miio-red-400);
  --text-error-deep:    var(--miio-red-500);
  --text-success:       var(--miio-green-400);
  --text-warning:       var(--miio-amber-400);
  --text-info:          var(--miio-blue-400);
  --text-promotional:   var(--miio-orange-500);
  --text-purple:        var(--miio-purple-400);
  --text-business:      var(--miio-navy-100);

  --action-primary:          var(--miio-teal-500);
  --action-primary-hover:    var(--miio-teal-600);
  --action-primary-deep:     var(--miio-teal-accent);
  --action-secondary:        var(--miio-neutral-700);
  --action-ghost:            transparent;
  --action-destructive:      var(--miio-red-500);
  --action-business:         var(--miio-navy-500);
  --action-purple:           var(--miio-purple-600);
  --action-promotional:      var(--miio-orange-500);
  --action-disabled-bg:      var(--miio-neutral-700);
  --action-disabled-fg:      var(--miio-neutral-400);
}

/* ──────────────────────────────────────────────────────────────
   RADII · SPACING · SHADOW · MOTION
   ────────────────────────────────────────────────────────────── */
:root {
  /* Radii */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;   /* buttons, inputs, small tags */
  --radius-lg:  10px;  /* toast */
  --radius-xl:  12px;  /* cards, surfaces */
  --radius-2xl: 16px;
  --radius-pill: 9999px;

  /* Spacing scale (4px grid) */
  --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;

  /* Shadow / elevation */
  --shadow-none:     none;
  --shadow-xs:       0 1px 2px rgba(17, 25, 25, 0.04);
  --shadow-sm:       0 1px 3px rgba(17, 25, 25, 0.06), 0 1px 2px rgba(17, 25, 25, 0.04);
  --shadow-md:       0 4px 10px rgba(17, 25, 25, 0.06), 0 2px 4px rgba(17, 25, 25, 0.04);
  --shadow-lg:       0 12px 24px rgba(17, 25, 25, 0.08), 0 4px 8px rgba(17, 25, 25, 0.04);
  --shadow-focus-ring: 0 0 0 3px rgba(12, 125, 111, 0.18);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-emphasized: cubic-bezier(0.2, 0.0, 0.0, 1.2);
  --ease-exit: cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 260ms;
}

/* ──────────────────────────────────────────────────────────────
   TYPOGRAPHY — PRIMITIVES & SEMANTICS
   ────────────────────────────────────────────────────────────── */
:root {
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Geist", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Size scale */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;

  /* Line heights */
  --lh-16: 16px;
  --lh-18: 18px;
  --lh-20: 20px;
  --lh-24: 24px;
  --lh-26: 26px;
  --lh-32: 32px;
  --lh-40: 40px;

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
}

html, body {
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Semantic type classes — apply or @extend */
.miio-display,
h1.miio {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  line-height: var(--lh-40);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  letter-spacing: -0.01em;
}

.miio-heading,
h2.miio {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  line-height: var(--lh-32);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  letter-spacing: -0.005em;
}

.miio-subheading,
h3.miio {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  line-height: var(--lh-26);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
}

.miio-title,
h4.miio {
  font-family: var(--font-display);
  font-size: var(--fs-16);
  line-height: var(--lh-24);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
}

.miio-body,
p.miio {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  font-weight: var(--fw-regular);
  color: var(--text-body);
}

.miio-body-md {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-24);
  font-weight: var(--fw-regular);
  color: var(--text-body);
}

.miio-label {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  line-height: var(--lh-18);
  font-weight: var(--fw-medium);
  color: var(--text-body);
}

.miio-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  line-height: var(--lh-18);
  font-weight: var(--fw-regular);
  color: var(--text-muted);
}

.miio-overline {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.miio-button-label {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  font-weight: var(--fw-bold);
}

/* Utility: monospace / numeric (Geist) */
.miio-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
}