/* maqet.io — feuille de style unique (auto-générée pour le déploiement).
   Tout est inline : aucune dépendance @import interne, robuste à l'upload. */

/* maqet.io — Webfonts
   Loaded from Google Fonts CDN.
   Display : Space Grotesk (geometric, technical, brutalist energy)
   Body/UI : Manrope (clean geometric, premium readability)
   Mono    : Space Mono (blueprint labels, metrics, annotations)
   NOTE: substituted from Google Fonts — see readme.md "Fonts" caveat. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* ===== tokens/colors.css ===== */
/* maqet.io — Color tokens
   System: Ink (near-black neutral) + Paper (warm bone) + one electric emerald accent.
   Brutalist contrast, premium warmth, accessible text values. */

:root {
  /* ---- Brand accent : electric emerald ---- */
  --c-accent:        #00D182;  /* signal green — fills, blocks, highlights (NOT body text on white) */
  --c-accent-bright: #00F09A;  /* hover / glow variant on dark */
  --c-accent-deep:   #00A468;  /* pressed / borders */
  --c-accent-ink:    #047857;  /* accessible green for text & links on light (AA) */
  --c-accent-soft:   #E4FBF1;  /* tint background */
  --c-accent-on:     #042B1E;  /* ink-green for text ON the accent fill */

  /* ---- Ink : neutral ramp ---- */
  --c-ink-950: #0A0A0B;
  --c-ink-900: #141417;
  --c-ink-800: #232328;
  --c-ink-700: #3A3A41;
  --c-ink-600: #56565F;
  --c-ink-500: #74747D;
  --c-ink-400: #9A9AA2;
  --c-ink-300: #C4C4CB;
  --c-ink-200: #E4E4E8;
  --c-ink-100: #F0F0F2;
  --c-ink-50:  #F7F7F8;

  /* ---- Paper : warm surfaces ---- */
  --c-paper:    #F6F5F0;  /* primary page background — warm bone */
  --c-paper-2:  #EEEDE6;  /* sunken / alt section */
  --c-white:    #FFFFFF;  /* cards on paper */

  /* ---- Semantic ---- */
  --c-success:      #00A468;
  --c-success-soft: #E4FBF1;
  --c-warning:      #E8910C;
  --c-warning-soft: #FCF1DD;
  --c-danger:       #E5484D;
  --c-danger-soft:  #FCE8E8;
  --c-info:         #2D6BFF;  /* blueprint blue — also the technical grid accent */
  --c-info-soft:    #E7EEFF;

  /* ---- Semantic aliases ---- */
  --bg:             var(--c-paper);
  --bg-sunken:      var(--c-paper-2);
  --surface:        var(--c-white);
  --surface-invert: var(--c-ink-950);

  --text-strong:    var(--c-ink-950);
  --text-body:      var(--c-ink-800);
  --text-muted:     var(--c-ink-500);
  --text-faint:     var(--c-ink-400);
  --text-on-invert: var(--c-paper);
  --text-link:      var(--c-accent-ink);

  --border:         var(--c-ink-950);   /* brutalist hard borders */
  --border-soft:    var(--c-ink-200);   /* hairline dividers */
  --border-grid:    rgba(10,10,11,0.08);/* blueprint grid lines on light */
}

/* ===== tokens/typography.css ===== */
/* maqet.io — Typography tokens */

:root {
  /* ---- Families ---- */
  --font-display: 'Space Grotesk', 'Manrope', system-ui, sans-serif;
  --font-sans:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- Weights ---- */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extra:    800; /* @kind font */

  /* ---- Type scale (rem @ 16px root) ---- */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  3rem;      /* 48 */
  --text-4xl:  4rem;      /* 64 */
  --text-5xl:  5.5rem;    /* 88 */
  --text-6xl:  7.5rem;    /* 120 */

  /* ---- Fluid display (hero, viewport-scaled) ---- */
  --text-display:    clamp(2.75rem, 8vw, 8rem);
  --text-display-sm: clamp(2rem, 5vw, 4rem);

  /* ---- Line heights ---- */
  --leading-none:    0.95;
  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.04em;  /* big display */
  --tracking-tight:   -0.02em;  /* headings */
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-label:   0.12em;   /* mono eyebrow labels, uppercase */
}

/* ===== tokens/spacing.css ===== */
/* maqet.io — Spacing & layout tokens (4px base) */

:root {
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  /* ---- Layout ---- */
  --container:      1200px;
  --container-wide: 1440px;
  --gutter:         var(--space-6);
  --section-y:      clamp(4rem, 9vw, 8rem); /* @kind spacing */

  /* ---- Grid ---- */
  --grid-cols: 12; /* @kind other */
  --grid-gap:  var(--space-6); /* @kind spacing */
}

/* ===== tokens/effects.css ===== */
/* maqet.io — Radii, borders, shadows, motion, blueprint motif */

:root {
  /* ---- Corner radius (soft-brutalist : sharp blocks, gently rounded cards) ---- */
  --radius-0:    0px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   22px;
  --radius-pill: 999px;

  /* ---- Border widths ---- */
  --bw-hair:  1px;
  --bw:       1.5px;
  --bw-bold:  2px;
  --bw-heavy: 3px;

  /* ---- Hard offset shadows (neobrutalist) ---- */
  --shadow-hard-xs: 2px 2px 0 var(--c-ink-950);
  --shadow-hard-sm: 3px 3px 0 var(--c-ink-950);
  --shadow-hard:    5px 5px 0 var(--c-ink-950);
  --shadow-hard-lg: 8px 8px 0 var(--c-ink-950);
  --shadow-hard-accent: 5px 5px 0 var(--c-accent);

  /* ---- Soft shadows (premium depth, used sparingly) ---- */
  --shadow-sm: 0 1px 2px rgba(10,10,11,0.06);
  --shadow-md: 0 8px 24px -10px rgba(10,10,11,0.18);
  --shadow-lg: 0 24px 60px -20px rgba(10,10,11,0.28);

  /* ---- Focus ring ---- */
  --ring: 0 0 0 3px var(--c-accent);

  /* ---- Motion ---- */
  --dur-fast: 120ms; /* @kind other */
  --dur:      200ms; /* @kind other */
  --dur-slow: 380ms; /* @kind other */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* @kind other */

  /* ---- Blueprint grid backgrounds (the maqet motif) ---- */
  --grid-line: var(--border-grid);
  --grid-size: 28px; /* @kind spacing */
  --bg-blueprint:
    linear-gradient(var(--grid-line) var(--bw-hair), transparent var(--bw-hair)),
    linear-gradient(90deg, var(--grid-line) var(--bw-hair), transparent var(--bw-hair));
  --bg-dots:
    radial-gradient(var(--border-grid) 1.2px, transparent 1.2px);
}

/* ===== tokens/base.css ===== */
/* maqet.io — Base element defaults & a few brand utilities.
   Lightweight reset + sensible typographic defaults. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--text-4xl); letter-spacing: var(--tracking-tighter); line-height: var(--leading-none); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

strong { font-weight: var(--fw-bold); color: var(--text-strong); }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }

::selection { background: var(--c-accent); color: var(--c-accent-on); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

hr { border: none; border-top: var(--bw-hair) solid var(--border-soft); margin: var(--space-8) 0; }

img { max-width: 100%; display: block; }

/* ---- Brand utilities ---- */

/* Mono eyebrow label — the technical/blueprint annotation */
.ds-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Blueprint grid surface */
.ds-blueprint {
  background-color: var(--bg);
  background-image: var(--bg-blueprint);
  background-size: var(--grid-size) var(--grid-size);
}
.ds-dots {
  background-color: var(--bg);
  background-image: var(--bg-dots);
  background-size: var(--grid-size) var(--grid-size);
}