/* ============================================================
   TCC — Design tokens (fonts, colors, typography, spacing, effects)
   Importé depuis le Design System Claude "tcc-design-system".
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&display=swap");

:root {
  /* ---- Slate blue (primary brand) ---- */
  --slate-900: #2B3A49;
  --slate-800: #34465A;
  --slate-700: #3F5468;
  --slate-600: #496078;
  --slate-500: #546D8A;
  --slate-400: #7589A2;
  --slate-300: #9DADC0;
  --slate-200: #C6D1DD;
  --slate-100: #E5EBF1;
  --slate-50:  #F3F6F9;

  /* ---- Red (signal / CTA accent) ---- */
  --red-700: #C21E0C;
  --red-600: #E62512;
  --red-500: #FF2E17;
  --red-400: #FF6453;
  --red-100: #FFE1DC;
  --red-50:  #FFF1EF;

  /* ---- Orange (secondary / warm accent) ---- */
  --orange-600: #D9740F;
  --orange-500: #F5871F;
  --orange-400: #FAA64F;
  --orange-100: #FCE8D2;

  /* ---- Neutrals ---- */
  --white:   #FFFFFF;
  --ink-900: #1C232B;
  --ink-700: #2E3842;
  --gray-600: #5C6874;
  --gray-500: #76828E;
  --gray-400: #9AA5AF;
  --gray-300: #C7CED5;
  --gray-200: #E3E8EC;
  --gray-100: #EEF1F4;
  --paper:    #F5F7F9;
  --black:    #0E1114;

  /* ---- Semantic feedback ---- */
  --green-600: #2E8B57;
  --green-500: #34A06A;
  --green-100: #DCF1E6;
  --amber-500: #E5A227;
  --amber-100: #FBEFD2;

  /* ---- Semantic aliases ---- */
  --color-primary:        var(--slate-500);
  --color-primary-strong: var(--slate-700);
  --color-primary-soft:   var(--slate-100);
  --color-accent:         var(--red-500);
  --color-accent-strong:  var(--red-600);
  --color-accent-soft:    var(--red-100);
  --color-secondary:      var(--orange-500);
  --color-secondary-soft: var(--orange-100);

  --text-strong:   var(--slate-900);
  --text-body:     var(--ink-700);
  --text-muted:    var(--gray-500);
  --text-on-dark:  var(--white);
  --text-on-accent:var(--white);
  --text-link:     var(--slate-600);

  --surface-page:    var(--paper);
  --surface-card:    var(--white);
  --surface-raised:  var(--white);
  --surface-sunken:  var(--slate-50);
  --surface-inverse: var(--slate-900);
  --surface-accent:  var(--red-500);

  --border:        var(--gray-200);
  --border-strong: var(--slate-200);
  --border-focus:  var(--slate-500);

  --color-success: var(--green-500);
  --color-success-soft: var(--green-100);
  --color-warning: var(--amber-500);
  --color-warning-soft: var(--amber-100);
  --color-danger:  var(--red-500);
  --color-danger-soft: var(--red-100);

  --focus-ring: 0 0 0 3px rgba(84, 109, 138, 0.35);

  /* ---- Typography ---- */
  --font-display: "Jost", "Century Gothic", "Futura", "Trebuchet MS", system-ui, sans-serif;
  --font-body:    "Jost", "Century Gothic", "Futura", "Trebuchet MS", system-ui, sans-serif;
  --font-mono:    "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* ---- Spacing ---- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;

  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: var(--space-5);
  --section-y: var(--space-11);

  /* ---- Effects ---- */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --border-width: 1px;
  --border-width-strong: 2px;

  --shadow-xs: 0 1px 2px rgba(43, 58, 73, 0.06);
  --shadow-sm: 0 1px 3px rgba(43, 58, 73, 0.08), 0 1px 2px rgba(43, 58, 73, 0.05);
  --shadow-md: 0 4px 14px rgba(43, 58, 73, 0.10), 0 2px 5px rgba(43, 58, 73, 0.06);
  --shadow-lg: 0 12px 32px rgba(43, 58, 73, 0.14), 0 4px 10px rgba(43, 58, 73, 0.07);
  --shadow-xl: 0 24px 60px rgba(43, 58, 73, 0.18);
  --shadow-accent: 0 8px 22px rgba(255, 46, 23, 0.30);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;
}