/* ============================================================
   NowDesk Design Tokens — v1.0
   Importer en début de tout fichier HTML/CSS NowDesk :
   <link rel="stylesheet" href="brand-system/tokens.css">
   ============================================================ */

:root {
  /* --- Blue scale (primary) --- */
  --nd-blue-50:  #EBF1FF;
  --nd-blue-100: #D6E2FF;
  --nd-blue-200: #A8C0FF;
  --nd-blue-300: #7A9DFF;
  --nd-blue-400: #4D7AFF;
  --nd-blue-500: #0B5FFF;
  --nd-blue-600: #0A4FD8;
  --nd-blue-700: #0A3FB0;
  --nd-blue-800: #0A2F88;
  --nd-blue-900: #0A1F60;

  /* --- Ink scale (neutrals) --- */
  --nd-ink-50:  #F4F6FA;
  --nd-ink-100: #E6EAF1;
  --nd-ink-200: #C9D1DE;
  --nd-ink-300: #9BA7BC;
  --nd-ink-400: #6B7894;
  --nd-ink-500: #475167;
  --nd-ink-600: #2F384B;
  --nd-ink-700: #1E2638;
  --nd-ink-800: #141B2B;
  --nd-ink-900: #0E1A2B;

  /* --- Semantic --- */
  --nd-success: #16A34A;
  --nd-warning: #F59E0B;
  --nd-danger:  #DC2626;
  --nd-info:    #0EA5E9;
  --nd-paper:   #FFFFFF;

  /* --- Aliases (use these in components, not the raw scales) --- */
  --nd-brand:           var(--nd-blue-500);
  --nd-brand-hover:     var(--nd-blue-600);
  --nd-brand-active:    var(--nd-blue-700);
  --nd-brand-soft:      var(--nd-blue-50);
  --nd-brand-deep:      var(--nd-blue-900);
  --nd-text-primary:    var(--nd-ink-900);
  --nd-text-secondary:  var(--nd-ink-500);
  --nd-text-muted:      var(--nd-ink-400);
  --nd-text-on-brand:   var(--nd-paper);
  --nd-surface:         var(--nd-paper);
  --nd-surface-alt:     var(--nd-ink-50);
  --nd-surface-deep:    var(--nd-blue-900);
  --nd-border:          var(--nd-ink-100);
  --nd-border-strong:   var(--nd-ink-200);
  --nd-focus-ring:      0 0 0 3px rgba(11, 95, 255, 0.32);

  /* --- Typography --- */
  --nd-font-display: "Aptos Display", "Aptos", "Segoe UI Variable Display", "Segoe UI", "Inter", system-ui, sans-serif;
  --nd-font-body:    "Aptos", "Segoe UI", "Inter", system-ui, sans-serif;
  --nd-font-mono:    "Cascadia Code", "Cascadia Mono", "Consolas", monospace;

  --nd-fw-regular:  400;
  --nd-fw-medium:   500;
  --nd-fw-semibold: 600;
  --nd-fw-bold:     700;

  --nd-fs-display-xl: 80px;  --nd-lh-display-xl: 88px;
  --nd-fs-display-lg: 56px;  --nd-lh-display-lg: 64px;
  --nd-fs-display-md: 40px;  --nd-lh-display-md: 48px;
  --nd-fs-heading-lg: 32px;  --nd-lh-heading-lg: 40px;
  --nd-fs-heading-md: 24px;  --nd-lh-heading-md: 32px;
  --nd-fs-heading-sm: 20px;  --nd-lh-heading-sm: 28px;
  --nd-fs-body-lg:    18px;  --nd-lh-body-lg:    28px;
  --nd-fs-body-md:    16px;  --nd-lh-body-md:    24px;
  --nd-fs-body-sm:    14px;  --nd-lh-body-sm:    20px;
  --nd-fs-caption:    12px;  --nd-lh-caption:    16px;

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

  /* --- Radius --- */
  --nd-radius-sm:   4px;
  --nd-radius-md:   8px;
  --nd-radius-lg:   12px;
  --nd-radius-xl:   16px;
  --nd-radius-2xl:  22px;
  --nd-radius-full: 9999px;

  /* --- Shadow --- */
  --nd-shadow-sm: 0 1px 2px rgba(15, 30, 80, 0.06);
  --nd-shadow-md: 0 4px 12px rgba(15, 30, 80, 0.08);
  --nd-shadow-lg: 0 12px 32px rgba(15, 30, 80, 0.10);
  --nd-shadow-xl: 0 16px 48px rgba(15, 30, 80, 0.12);

  /* --- Motion --- */
  --nd-duration-fast:   120ms;
  --nd-duration-normal: 200ms;
  --nd-duration-slow:   320ms;
  --nd-ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --nd-ease-emphasis:   cubic-bezier(0.3, 0, 0, 1);
}

/* ------------------------------------------------------------
   Base resets utilisant les tokens
   ------------------------------------------------------------ */
html { font-family: var(--nd-font-body); color: var(--nd-text-primary); background: var(--nd-surface); }
body { margin: 0; font-size: var(--nd-fs-body-md); line-height: var(--nd-lh-body-md); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--nd-font-display);
  font-weight: var(--nd-fw-semibold);
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--nd-text-primary);
  text-wrap: balance;
}
h1 { font-size: var(--nd-fs-heading-lg); line-height: var(--nd-lh-heading-lg); }
h2 { font-size: var(--nd-fs-heading-md); line-height: var(--nd-lh-heading-md); }
h3 { font-size: var(--nd-fs-heading-sm); line-height: var(--nd-lh-heading-sm); }

p { margin: 0; text-wrap: pretty; }
a { color: var(--nd-brand-active); text-underline-offset: 2px; }
a:hover { color: var(--nd-brand); }

code, pre { font-family: var(--nd-font-mono); }

::selection { background: var(--nd-blue-200); color: var(--nd-text-primary); }