/* ============================================================
   hila-tokens.css — Variáveis CSS do Design System Hila
   Só tokens (:root). Sem reset global — o site já tem o seu.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* —— Brand —— */
  --brand-50:  #f5f5fd;
  --brand-100: #ececfb;
  --brand-200: #d7d6f5;
  --brand-300: #b8b6ec;
  --brand-400: #908ddf;
  --brand-500: #6e6bd3;
  --brand-600: #514ebe;
  --brand-700: #423fa1;
  --brand-800: #353380;
  --brand-900: #2a2961;

  /* —— Glass —— */
  --glass-50:  #eef7fc;
  --glass-100: #dceff8;
  --glass-200: #b6def0;
  --glass-300: #88c8e6;
  --glass-400: #54acd6;
  --glass-500: #2e90c2;
  --glass-600: #2173a3;
  --glass-700: #1d5c82;

  /* —— Ink (texto / linhas) —— */
  --ink-900: #1b1b2e;
  --ink-800: #2c2c44;
  --ink-700: #41415c;
  --ink-600: #5b5b78;
  --ink-500: #777793;
  --ink-400: #9a9ab2;
  --ink-300: #c2c2d3;
  --ink-200: #dededf;
  --ink-100: #ebecf2;
  --ink-50:  #f5f6fa;
  --white:   #ffffff;

  /* —— Estados —— */
  --success-500: #2f9e7d;
  --success-100: #d9f1e8;
  --warning-500: #d99a2b;
  --warning-100: #f8ecce;
  --danger-500:  #d8554f;
  --danger-100:  #f7dedc;
  --info-500:    var(--glass-500);
  --info-100:    var(--glass-100);

  /* —— Aliases semânticos —— */
  --color-accent:          var(--brand-600);
  --color-accent-hover:    var(--brand-700);
  --color-accent-soft:     var(--brand-100);
  --color-accent-quiet:    var(--brand-50);
  --color-accent-contrast: var(--white);

  --text-strong:    var(--ink-900);
  --text-body:      var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-faint:     var(--ink-400);
  --text-on-accent: var(--white);
  --text-link:      var(--brand-600);

  --surface-page:    var(--ink-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--brand-50);
  --surface-glass:   rgba(255, 255, 255, 0.62);
  --surface-accent:  var(--brand-600);
  --surface-inverse: var(--ink-900);

  --border-subtle:  var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-accent:  var(--brand-300);

  --wash-sky:   linear-gradient(160deg, #f5f5fd 0%, #eef7fc 48%, #ffffff 100%);
  --wash-brand: linear-gradient(150deg, var(--brand-600) 0%, var(--brand-500) 55%, var(--glass-500) 130%);

  /* —— Tipografia —— */
  --font-sans:    'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  62px;
  --text-6xl:  80px;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  --leading-tight:   1.08;
  --leading-snug:    1.22;
  --leading-normal:  1.5;
  --leading-relaxed: 1.68;

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

  /* —— Espaçamento —— */
  --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 —— */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  34px;
  --radius-2xl: 48px;
  --radius-pill: 999px;

  /* —— Sombras —— */
  --shadow-xs: 0 1px 2px rgba(42, 41, 97, 0.06);
  --shadow-sm: 0 2px 8px rgba(42, 41, 97, 0.07);
  --shadow-md: 0 8px 24px rgba(42, 41, 97, 0.09);
  --shadow-lg: 0 18px 44px rgba(42, 41, 97, 0.12);
  --shadow-xl: 0 32px 70px rgba(42, 41, 97, 0.16);
  --shadow-accent: 0 14px 34px rgba(81, 78, 190, 0.30);
  --shadow-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.6);

  --blur-glass: 16px;

  /* —— Motion —— */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;

  /* —— Layout —— */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1320px;
}