/* =========================================================================
   Alona — Colors & Type
   Core design tokens de Alona (sistema de diseño en claude.ai/design). Prefijo técnico --df-* conservado.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root {
  /* COLOR — base palette */
  --df-primary: #E48B59;        /* warm terracotta — primary action / brand accent */
  --df-secondary: #ED7B46;      /* deeper orange — focal accent, CTAs */
  --df-accent: #ED7B46;         /* alias of secondary */
  --df-primary-soft: #F6C9AE;   /* tinted primary — backgrounds, pills */
  --df-primary-deep: #C76A3A;   /* pressed / dark variant */

  --df-bg: #FFFFFF;             /* page background */
  --df-bg-muted: #F7F7F8;       /* subtle section bg */
  --df-bg-elevated: #FFFFFF;    /* card surface on light pages */

  --df-surface: #53617A;        /* slate — dashboard/data surfaces */
  --df-surface-2: #3F4B61;      /* deeper slate, nested panels */
  --df-surface-3: #2A3142;      /* deepest slate, inset wells */
  --df-surface-ink: #E8ECF3;    /* text on slate surface */
  --df-surface-ink-muted: #A8B0C0;

  --df-text: #111827;           /* primary text */
  --df-text-2: #4B5563;         /* secondary text */
  --df-text-3: #6B7280;         /* tertiary / metadata */
  --df-text-inverse: #FFFFFF;

  --df-border: #D8DADF;         /* default hairline */
  --df-border-soft: #ECEDF0;    /* subtler dividers */
  --df-border-strong: #B6BAC2;  /* emphasized */

  /* Semantic */
  --df-success: #2F9E6E;
  --df-warning: #E0A23A;
  --df-danger:  #D24E4E;
  --df-info:    #4A7DD9;

  /* TYPE — families */
  --df-font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --df-font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --df-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* TYPE — scale */
  --df-display-lg-size: 64px; --df-display-lg-weight: 500; --df-display-lg-lh: 1.04;
  --df-display-md-size: 48px; --df-display-md-weight: 500; --df-display-md-lh: 1.06;
  --df-h1-size: 40px; --df-h1-weight: 600; --df-h1-lh: 1.1;
  --df-h2-size: 28px; --df-h2-weight: 600; --df-h2-lh: 1.2;
  --df-h3-size: 20px; --df-h3-weight: 600; --df-h3-lh: 1.3;
  --df-body-lg-size: 18px; --df-body-lg-lh: 1.6;
  --df-body-md-size: 16px; --df-body-md-weight: 400; --df-body-md-lh: 1.6;
  --df-body-sm-size: 14px; --df-body-sm-lh: 1.55;
  --df-label-md-size: 12px; --df-label-md-weight: 600; --df-label-md-lh: 1.2; --df-label-md-tracking: 0.06em;
  --df-label-sm-size: 11px; --df-label-sm-weight: 600; --df-label-sm-tracking: 0.08em;

  /* SPACING — 8pt base */
  --df-space-1: 4px; --df-space-2: 8px; --df-space-3: 12px; --df-space-4: 16px;
  --df-space-5: 20px; --df-space-6: 24px; --df-space-8: 32px; --df-space-10: 40px;
  --df-space-12: 48px; --df-space-16: 64px; --df-space-20: 80px; --df-space-24: 96px;

  /* RADII */
  --df-radius-control: 8px; --df-radius-card: 16px; --df-radius-lg: 24px; --df-radius-pill: 9999px;

  /* SHADOWS */
  --df-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.04), 0 1px 1px rgba(17, 24, 39, 0.03);
  --df-shadow-md: 0 4px 12px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
  --df-shadow-lg: 0 16px 40px rgba(17, 24, 39, 0.10), 0 2px 6px rgba(17, 24, 39, 0.05);
  --df-shadow-glow: 0 0 0 4px rgba(228, 139, 89, 0.18);

  /* MOTION */
  --df-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --df-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --df-dur-fast: 140ms; --df-dur-base: 240ms; --df-dur-slow: 480ms;
}

html, body {
  font-family: var(--df-font-body);
  color: var(--df-text);
  background: var(--df-bg);
  font-size: var(--df-body-md-size);
  line-height: var(--df-body-md-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font-family: var(--df-font-display); font-size: var(--df-h1-size); font-weight: var(--df-h1-weight); line-height: var(--df-h1-lh); letter-spacing: -0.01em; color: var(--df-text); margin: 0; }
h2 { font-family: var(--df-font-display); font-size: var(--df-h2-size); font-weight: var(--df-h2-weight); line-height: var(--df-h2-lh); letter-spacing: -0.005em; color: var(--df-text); margin: 0; }
h3 { font-family: var(--df-font-display); font-size: var(--df-h3-size); font-weight: var(--df-h3-weight); line-height: var(--df-h3-lh); color: var(--df-text); margin: 0; }
p  { font-size: var(--df-body-md-size); line-height: var(--df-body-md-lh); color: var(--df-text-2); margin: 0; }