/* ============================================================
 * QOTT — DESIGN SYSTEM TOKENS
 * Copy this file into your codebase as the source of truth.
 * ============================================================ */

/* Cor de acento padrão do navegador (calendário, radios, focus rings nativos) */
html { accent-color: #FF7D35; color-scheme: light; }

:root {
  /* ---------- BRAND GRADIENT (logo, illustrations, hero CTA) ---------- */
  --qott-g1: #FF872A;  /* Mango stop */
  --qott-g2: #FE4173;  /* Coral stop */
  --qott-g3: #EF378F;  /* Magenta stop */
  --qott-g4: #A42CC9;  /* Iris stop */

  --qott-gradient: linear-gradient(135deg, #FF872A 0%, #FE4173 38%, #EF378F 66%, #A42CC9 100%);
  --qott-gradient-bg: radial-gradient(120% 90% at 0% 100%, #A42CC9 0%, transparent 55%),
                      linear-gradient(135deg, #FF872A 0%, #FE4173 45%, #EF378F 75%, #A42CC9 100%);

  /* ---------- SECONDARY SOLIDS (use individually) ---------- */
  --qott-mango:   #FF7D35;
  --qott-coral:   #FE565D;
  --qott-magenta: #F63C83;
  --qott-iris:    #C332B3;

  /* ---------- MASCOT ACCENTS ---------- */
  --qott-teal:  #2BA39F;   /* Wing teal · success / positive */
  --qott-honey: #E8A152;   /* Warm highlight */

  /* ---------- SURFACES (warm neutrals) ---------- */
  --qott-paper: #F6F5F1;   /* Base page background */
  --qott-cream: #EFEAE0;   /* Warm callouts, segmented bg */
  --qott-white: #FFFFFF;   /* Raised cards, inputs */

  /* ---------- INK SCALE ---------- */
  --qott-ink:        #0E0E12;             /* Primary text, primary CTA */
  --qott-ink-90:     #1F1F25;
  --qott-ink-70:     rgba(14, 14, 18, 0.72);  /* Secondary text */
  --qott-ink-55:     rgba(14, 14, 18, 0.55);  /* Muted, captions */
  --qott-ink-40:     rgba(14, 14, 18, 0.40);  /* Placeholders */
  --qott-ink-25:     rgba(14, 14, 18, 0.25);  /* Disabled */

  /* ---------- LINES ---------- */
  --qott-line:        rgba(14, 14, 18, 0.08);
  --qott-line-mid:    rgba(14, 14, 18, 0.14);
  --qott-line-strong: rgba(14, 14, 18, 0.24);

  /* ---------- STATUS (brand-aligned semantics) ---------- */
  --qott-draft-dot:    #9A968D;
  --qott-draft-bg:     #EDEAE2;
  --qott-draft-fg:     #6B6760;

  --qott-sent-dot:     #FF7D35;
  --qott-sent-bg:      #FFEEDE;
  --qott-sent-fg:      #B85714;

  --qott-approved-dot: #2BA39F;
  --qott-approved-bg:  #DFF3F0;
  --qott-approved-fg:  #0F6E69;

  --qott-lost-dot:     #FE565D;
  --qott-lost-bg:      #FFE3E4;
  --qott-lost-fg:      #B43338;

  /* ---------- TYPOGRAPHY ---------- */
  --qott-font-display: 'Manrope', system-ui, sans-serif;
  --qott-font-body:    'DM Sans', system-ui, sans-serif;
  --qott-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Type scale (size · letter-spacing · line-height · weight) */
  --qott-type-display-xl:  56px / 1   ; /* -0.04em · 800 · Manrope */
  --qott-type-display-lg:  40px / 1.05; /* -0.03em · 800 · Manrope */
  --qott-type-headline:    28px / 1.1 ; /* -0.02em · 700 · Manrope */
  --qott-type-title-lg:    20px / 1.2 ; /* -0.01em · 700 · Manrope */
  --qott-type-title-md:    16px / 1.3 ; /*  0      · 600 · DM Sans */
  --qott-type-body-lg:     16px / 1.55; /*  0      · 400 · DM Sans */
  --qott-type-body-md:     14px / 1.55; /*  0      · 400 · DM Sans */
  --qott-type-body-sm:     13px / 1.5 ; /*  0      · 400 · DM Sans */
  --qott-type-caption:     11px / 1.4 ; /*  0.22em · 600 caps · DM Sans */
  --qott-type-number-lg:   32px;        /* -0.02em · 700 · Manrope · tabular-nums */

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

  /* ---------- RADIUS ---------- */
  --qott-radius-xs:  4px;
  --qott-radius-sm:  8px;   /* small chips, table-cell pills */
  --qott-radius-md:  12px;  /* inputs */
  --qott-radius-lg:  16px;  /* buttons (visually) — see button heights below */
  --qott-radius-xl:  20px;  /* cards */
  --qott-radius-2xl: 24px;  /* modals */
  --qott-radius-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --qott-shadow-xs:    0 1px 2px rgba(14, 14, 18, 0.04);
  --qott-shadow-sm:    0 2px 6px rgba(14, 14, 18, 0.06);
  --qott-shadow-md:    0 8px 20px -4px rgba(14, 14, 18, 0.08), 0 2px 4px rgba(14, 14, 18, 0.04);
  --qott-shadow-lg:    0 20px 50px -12px rgba(14, 14, 18, 0.16);
  --qott-shadow-modal: 0 30px 70px -20px rgba(14, 14, 18, 0.28);
  --qott-shadow-glow:  0 14px 30px -8px rgba(254, 65, 115, 0.35); /* hero CTA */

  /* ---------- HEIGHTS (controls) ---------- */
  --qott-h-sm: 32px;   /* small button / input */
  --qott-h-md: 40px;   /* default button */
  --qott-h-md-input: 44px;
  --qott-h-lg: 48px;   /* large button */
  --qott-h-lg-input: 52px;

  /* ---------- MOTION ---------- */
  --qott-ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --qott-dur-fast: 120ms;
  --qott-dur:      180ms;
  --qott-dur-slow: 300ms;
}

/* ============================================================
 * TYPOGRAPHY UTILITY CLASSES (optional reference)
 * ============================================================ */
.qott-display-xl  { font-family: var(--qott-font-display); font-weight: 800; font-size: 56px; line-height: 1;    letter-spacing: -0.04em; }
.qott-display-lg  { font-family: var(--qott-font-display); font-weight: 800; font-size: 40px; line-height: 1.05; letter-spacing: -0.03em; }
.qott-headline    { font-family: var(--qott-font-display); font-weight: 700; font-size: 28px; line-height: 1.1;  letter-spacing: -0.02em; }
.qott-title-lg    { font-family: var(--qott-font-display); font-weight: 700; font-size: 20px; line-height: 1.2;  letter-spacing: -0.01em; }
.qott-title-md    { font-family: var(--qott-font-body);    font-weight: 600; font-size: 16px; line-height: 1.3;  }
.qott-body-lg     { font-family: var(--qott-font-body);    font-weight: 400; font-size: 16px; line-height: 1.55; }
.qott-body-md     { font-family: var(--qott-font-body);    font-weight: 400; font-size: 14px; line-height: 1.55; }
.qott-body-sm     { font-family: var(--qott-font-body);    font-weight: 400; font-size: 13px; line-height: 1.5;  }
.qott-caption     { font-family: var(--qott-font-body);    font-weight: 600; font-size: 11px; line-height: 1.4;  letter-spacing: 0.22em; text-transform: uppercase; }
.qott-number      { font-variant-numeric: tabular-nums; }