/* =========================================================================
   ScaleX — Colors & Type
   Industrial French B2B. Built around the devis (quote) as the core artifact.
   Cream paper, ink steel, signal orange. Geist + Geist Mono.
   ========================================================================= */

* {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* ---------- Fonts (Google Fonts substitutes — see README for status) ------ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* ===== Palette — raw =================================================== */

  /* Paper — warm cream tones, the "devis" feel */
  --paper:        #F3EFE6;   /* default page background */
  --paper-soft:   #E9E2D2;   /* alt panel / muted card */
  --paper-edge:   #DDD4BF;   /* hairline borders on cream */
  --chalk:        #FBF8F1;   /* lightest cream, raised surface */
  --chalk-pure:   #FFFFFF;

  /* Ink / Steel — the blueprint */
  --ink:          #0E1410;   /* primary text, near-black with green undertone */
  --steel-900:   #18222D;    /* deepest navy, hero surface */
  --steel-800:   #25313F;
  --steel-700:   #36465A;
  --steel-500:   #5A6A7E;    /* secondary text on cream */
  --steel-300:   #8A98A9;
  --steel-200:   #B6C0CC;
  --steel-100:   #D6DCE4;

  /* Signal — the action color. Industrial safety orange. */
  --signal:       #FF5C2A;
  --signal-deep:  #E64414;
  --signal-soft:  #FFE3D6;

  /* Amber — pipeline warmth ("tiède", devis en cours) */
  --amber:        #F2A900;
  --amber-soft:   #FFEEC0;

  /* Verified — gagné */
  --verified:     #2F7A4A;
  --verified-soft:#D6E9DC;

  /* Lost — perdu / urgent */
  --lost:         #B83A26;
  --lost-soft:    #F5D9D2;

  /* ===== Semantic — surfaces, text, lines =============================== */

  --bg:               var(--paper);
  --bg-raised:        var(--chalk);
  --bg-sunken:        var(--paper-soft);
  --bg-inverse:       var(--steel-900);

  --fg:               var(--ink);
  --fg-1:             var(--ink);          /* primary text */
  --fg-2:             var(--steel-700);    /* secondary text */
  --fg-3:             var(--steel-500);    /* tertiary / meta */
  --fg-4:             var(--steel-300);    /* placeholder, disabled */
  --fg-inverse:       var(--chalk);

  --accent:           var(--signal);
  --accent-fg:        var(--chalk-pure);
  --accent-deep:      var(--signal-deep);

  --line:             rgba(24, 34, 45, 0.12); /* default hairline on cream */
  --line-strong:      rgba(24, 34, 45, 0.24);
  --line-inverse:     rgba(251, 248, 241, 0.14);

  --focus-ring:       var(--signal);

  /* Pipeline statuses (used in dashboards/badges) */
  --status-hot:       var(--signal);     /* chaud — relancer maintenant */
  --status-warm:      var(--amber);      /* tiède — à suivre */
  --status-cold:      var(--steel-300);  /* froid */
  --status-won:       var(--verified);   /* gagné */
  --status-lost:      var(--lost);       /* perdu */

  /* ===== Spacing — 4px base ============================================= */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ===== Radii — sparing, intentional =================================== */
  --radius-none: 0;
  --radius-xs:   2px;   /* badges, pills, status dots */
  --radius-sm:   4px;   /* inputs, small buttons */
  --radius-md:   6px;   /* cards, panels */
  --radius-lg:   10px;  /* big cards, modals */
  --radius-full: 999px;

  /* ===== Shadows — restrained. Cream paper doesn't need glow. =========== */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(24, 34, 45, 0.06),
              0 1px 2px rgba(24, 34, 45, 0.04);
  --shadow-2: 0 1px 0 rgba(24, 34, 45, 0.06),
              0 4px 12px -2px rgba(24, 34, 45, 0.08);
  --shadow-3: 0 2px 0 rgba(24, 34, 45, 0.06),
              0 16px 32px -8px rgba(24, 34, 45, 0.14);
  --shadow-inset: inset 0 0 0 1px var(--line);

  /* ===== Motion ========================================================= */
  --ease-out:      cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.6, 0, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* ===== Type — families, sizes, leading ================================ */
  --font-sans:    'Geist', 'Inter', 'Söhne', system-ui, -apple-system, sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* Step — modular scale (1.200) anchored at 16px */
  --t-12: 12px;
  --t-13: 13px;
  --t-14: 14px;
  --t-15: 15px;
  --t-16: 16px;
  --t-18: 18px;
  --t-21: 21px;
  --t-24: 24px;
  --t-28: 28px;
  --t-34: 34px;
  --t-42: 42px;
  --t-56: 56px;
  --t-72: 72px;
  --t-96: 96px;

  /* Weights — Geist works best at 400 / 500 / 600. Avoid heavier on body. */
  --w-light:     300;
  --w-regular:   400;
  --w-medium:    500;
  --w-semibold:  600;
  --w-bold:      700;

  /* Tracking — display set tight, mono and small caps loosened slightly */
  --tr-tight:    -0.022em;
  --tr-snug:     -0.012em;
  --tr-normal:   0;
  --tr-loose:    0.04em;
  --tr-mono:     -0.005em;
}

/* ============================================================
   Base + Semantic Type Styles
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--t-16);
  line-height: 1.5;
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display — used sparingly. Tight tracking, light leading. */
.t-display-xl,
h1.t-display-xl {
  font-family: var(--font-sans);
  font-size: var(--t-96);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-tight);
  line-height: 0.96;
}
.t-display,
h1 {
  font-family: var(--font-sans);
  font-size: var(--t-72);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-tight);
  line-height: 1.02;
}
.t-h1,
h2 {
  font-family: var(--font-sans);
  font-size: var(--t-42);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-snug);
  line-height: 1.08;
}
.t-h2,
h3 {
  font-family: var(--font-sans);
  font-size: var(--t-28);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-snug);
  line-height: 1.18;
}
.t-h3,
h4 {
  font-family: var(--font-sans);
  font-size: var(--t-21);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-snug);
  line-height: 1.3;
}
.t-h4,
h5 {
  font-family: var(--font-sans);
  font-size: var(--t-16);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-normal);
  line-height: 1.4;
}

.t-lede {              /* hero subtitles, lede paragraphs */
  font-size: var(--t-21);
  font-weight: var(--w-regular);
  letter-spacing: var(--tr-snug);
  line-height: 1.45;
  color: var(--fg-2);
}

.t-body,
p {
  font-size: var(--t-16);
  font-weight: var(--w-regular);
  line-height: 1.55;
  color: var(--fg-1);
}

.t-body-sm {
  font-size: var(--t-14);
  line-height: 1.5;
  color: var(--fg-2);
}

.t-meta {              /* captions, metadata, labels */
  font-size: var(--t-12);
  letter-spacing: var(--tr-loose);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: var(--w-medium);
}

.t-mono,
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.94em;
  letter-spacing: var(--tr-mono);
  font-feature-settings: 'tnum' 1, 'ss01' 1;
}

.t-num {              /* tabular numbers — for prix, devis refs */
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1;
  letter-spacing: var(--tr-mono);
}

/* Links — inherit ink, signal underline that thickens on hover */
a {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--dur-1) var(--ease-out);
}
a:hover { text-decoration-thickness: 3px; }

::selection {
  background: var(--ink);
  color: var(--chalk);
}

/* Blueprint grid backdrop — usable as a class on hero surfaces */
.bg-blueprint {
  background-color: var(--paper);
  background-image:
    linear-gradient(to right,  rgba(24, 34, 45, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(24, 34, 45, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
}
.bg-blueprint-dense {
  background-color: var(--paper);
  background-image:
    radial-gradient(rgba(24, 34, 45, 0.18) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* Inverse — for dark hero blocks on steel */
.surface-inverse {
  background: var(--bg-inverse);
  color: var(--fg-inverse);
  --fg-1: var(--chalk);
  --fg-2: var(--steel-200);
  --fg-3: var(--steel-300);
  --line: var(--line-inverse);
}