/* =========================================================
   professordesocials — Design Tokens (v3 redisseny editorial)
   Self-hosted fonts: see ./fonts.css (loaded before this file).
   ========================================================= */

:root {
  /* -------- COLOR -------- */

  /* Blau Estudi — primary */
  --qe-blue-50:  #EEF2FB;
  --qe-blue-100: #D9E1F5;
  --qe-blue-200: #B3C2EB;
  --qe-blue-300: #7A8FD4;
  --qe-blue-400: #4A62B8;
  --qe-blue-500: #2A46A3;
  --qe-blue-600: #1F3A8A;   /* brand */
  --qe-blue-700: #182E6E;
  --qe-blue-800: #112254;
  --qe-blue-900: #0B1840;

  /* Groc Guia — accent */
  --qe-yellow-50:  #FFF8E1;
  --qe-yellow-100: #FFEDB4;
  --qe-yellow-300: #FFDA75;
  --qe-yellow-500: #FFC94A;   /* accent */
  --qe-yellow-600: #E8AE1F;
  --qe-yellow-700: #B8860B;

  /* Verd Dada — success */
  --qe-green-50:  #E6F6EE;
  --qe-green-500: #1FBE7C;
  --qe-green-600: #18A56B;
  --qe-green-700: #128653;

  /* Coral — danger */
  --qe-coral-50:  #FCECEC;
  --qe-coral-500: #E5484D;
  --qe-coral-600: #C5383D;

  /* Neutres càlids (ink + stone) */
  --qe-paper:    #FBF8F2;   /* fons base */
  --qe-paper-2:  #F4EFE4;   /* fons secundari càlid */
  --qe-ink:      #0E1330;   /* text principal */
  --qe-ink-2:    #4A5075;   /* text secundari */
  --qe-ink-3:    #8288A8;   /* text terciari / placeholder */

  --qe-stone-50:  #F7F4EC;
  --qe-stone-100: #EDE8DC;
  --qe-stone-200: #DCD5C4;
  --qe-stone-300: #B8AF98;
  --qe-stone-400: #8B8470;
  --qe-stone-500: #5C5748;

  --qe-white: #FFFFFF;
  --qe-black: #000000;

  /* -------- SEMANTIC COLOR -------- */
  --qe-bg:            var(--qe-paper);
  --qe-bg-elevated:   var(--qe-white);
  --qe-bg-inverse:    var(--qe-blue-900);
  --qe-bg-muted:      var(--qe-stone-50);
  --qe-bg-accent:     var(--qe-yellow-100);

  --qe-fg:            var(--qe-ink);
  --qe-fg-muted:      var(--qe-ink-2);
  --qe-fg-subtle:     var(--qe-ink-3);
  --qe-fg-inverse:    var(--qe-paper);
  --qe-fg-brand:      var(--qe-blue-600);
  --qe-fg-accent:     var(--qe-yellow-700);

  --qe-border:        var(--qe-stone-200);
  --qe-border-strong: var(--qe-stone-300);
  --qe-border-brand:  var(--qe-blue-600);

  --qe-success:       var(--qe-green-600);
  --qe-success-bg:    var(--qe-green-50);
  --qe-danger:        var(--qe-coral-500);
  --qe-danger-bg:     var(--qe-coral-50);
  --qe-warning:       var(--qe-yellow-600);
  --qe-warning-bg:    var(--qe-yellow-50);

  /* -------- TYPOGRAPHY -------- */
  --qe-font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --qe-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --qe-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Font sizes — modular scale 1.25 */
  --qe-fs-xs:   12px;
  --qe-fs-sm:   14px;
  --qe-fs-base: 16px;
  --qe-fs-lg:   20px;
  --qe-fs-xl:   24px;  /* h3 */
  --qe-fs-2xl:  32px;  /* h2 */
  --qe-fs-3xl:  40px;
  --qe-fs-4xl:  48px;  /* h1 */
  --qe-fs-5xl:  56px;
  --qe-fs-hero: 72px;  /* hero */

  /* Line heights */
  --qe-lh-tight:   1.05;
  --qe-lh-snug:    1.2;
  --qe-lh-normal:  1.45;
  --qe-lh-relaxed: 1.65;

  /* Letter spacing */
  --qe-ls-tight:  -0.02em;
  --qe-ls-normal:  0;
  --qe-ls-wide:   0.04em;
  --qe-ls-caps:   0.08em;

  /* -------- SPACE (4px base) -------- */
  --qe-space-0:   0;
  --qe-space-1:   4px;
  --qe-space-2:   8px;
  --qe-space-3:   12px;
  --qe-space-4:   16px;
  --qe-space-5:   20px;
  --qe-space-6:   24px;
  --qe-space-7:   32px;
  --qe-space-8:   40px;
  --qe-space-9:   48px;
  --qe-space-10:  64px;
  --qe-space-11:  80px;
  --qe-space-12:  96px;
  --qe-space-16:  128px;

  /* -------- RADIUS -------- */
  --qe-radius-xs:   4px;
  --qe-radius-sm:   8px;
  --qe-radius-md:   10px;  /* buttons, inputs */
  --qe-radius-lg:   16px;  /* cards */
  --qe-radius-xl:   24px;  /* hero, report */
  --qe-radius-pill: 999px;

  /* -------- SHADOWS (tinted blue) -------- */
  --qe-shadow-sm: 0 1px 2px rgba(14, 19, 48, 0.05);
  --qe-shadow-md: 0 4px 12px rgba(14, 19, 48, 0.08);
  --qe-shadow-lg: 0 16px 40px rgba(14, 19, 48, 0.12);
  --qe-shadow-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* -------- MOTION -------- */
  --qe-ease:   cubic-bezier(0.2, 0, 0, 1);
  --qe-dur-1:  120ms;
  --qe-dur-2:  200ms;
  --qe-dur-3:  320ms;
  --qe-dur-4:  480ms;

  /* -------- LAYOUT -------- */
  --qe-container:     1200px;
  --qe-container-narrow: 768px;
  --qe-header-h:      72px;
  --qe-gutter:        24px;

  /* -------- FOCUS -------- */
  --qe-ring: 0 0 0 2px var(--qe-paper), 0 0 0 4px var(--qe-blue-600);
}

/* =========================================================
   Base element styles (semantic defaults)
   Use class .qe-scope to opt-in when embedded in other contexts.
   ========================================================= */

.qe-scope,
html.qe {
  font-family: var(--qe-font-body);
  font-size: var(--qe-fs-base);
  line-height: var(--qe-lh-normal);
  color: var(--qe-fg);
  background: var(--qe-bg);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.qe-scope h1, .qe-h1 {
  font-family: var(--qe-font-display);
  font-weight: 600;
  font-size: var(--qe-fs-4xl);
  line-height: var(--qe-lh-tight);
  letter-spacing: var(--qe-ls-tight);
  color: var(--qe-fg);
  margin: 0 0 var(--qe-space-4);
}
.qe-scope h2, .qe-h2 {
  font-family: var(--qe-font-display);
  font-weight: 600;
  font-size: var(--qe-fs-2xl);
  line-height: var(--qe-lh-snug);
  letter-spacing: var(--qe-ls-tight);
  margin: 0 0 var(--qe-space-3);
}
.qe-scope h3, .qe-h3 {
  font-family: var(--qe-font-display);
  font-weight: 600;
  font-size: var(--qe-fs-xl);
  line-height: var(--qe-lh-snug);
  margin: 0 0 var(--qe-space-2);
}
.qe-scope h4, .qe-h4 {
  font-family: var(--qe-font-body);
  font-weight: 600;
  font-size: var(--qe-fs-lg);
  line-height: var(--qe-lh-snug);
  margin: 0 0 var(--qe-space-2);
}

.qe-hero {
  font-family: var(--qe-font-display);
  font-weight: 600;
  font-size: clamp(40px, 6vw, var(--qe-fs-hero));
  line-height: var(--qe-lh-tight);
  letter-spacing: var(--qe-ls-tight);
}

.qe-lead {
  font-size: var(--qe-fs-lg);
  line-height: var(--qe-lh-relaxed);
  color: var(--qe-fg-muted);
  max-width: 56ch;
}

.qe-scope p, .qe-p {
  margin: 0 0 var(--qe-space-4);
  max-width: 65ch;
}

.qe-scope small, .qe-small {
  font-size: var(--qe-fs-sm);
  color: var(--qe-fg-muted);
}

.qe-caps {
  font-size: var(--qe-fs-xs);
  letter-spacing: var(--qe-ls-caps);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--qe-fg-muted);
}

.qe-mono { font-family: var(--qe-font-mono); font-variant-numeric: tabular-nums; }

.qe-scope a, .qe-a {
  color: var(--qe-fg-brand);
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--qe-dur-1) var(--qe-ease);
}
.qe-scope a:hover, .qe-a:hover { text-decoration: underline; }

.qe-scope code, .qe-code {
  font-family: var(--qe-font-mono);
  font-size: 0.92em;
  background: var(--qe-bg-muted);
  padding: 0.1em 0.35em;
  border-radius: var(--qe-radius-xs);
}

/* Focus ring */
.qe-scope :focus-visible {
  outline: 2px solid var(--qe-blue-600);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Utility highlight (marker) */
.qe-mark {
  background: linear-gradient(transparent 60%, var(--qe-yellow-300) 60%);
  padding: 0 0.1em;
}

/* Dot pattern for decorative sections */
.qe-dots {
  background-image: radial-gradient(var(--qe-stone-200) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0;
}