/* ==========================================================================
   Magnific DS — Design tokens (light theme)
   Colores extraídos de magnific.com (:root custom properties)
   Tipografía según design.md v17 (freepik-company/design-md)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fuentes locales (fonts/ del design system).
   Geist y Geist Mono son variables: una sola .woff2 cubre 100–900.
   ES Klarheit Plakat FP: corte fijo Extrabold (el usado por display).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Italic-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ES Klarheit Plakat FP";
  src: url("../fonts/ESKlarheitPlakatFP-Extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surface */
  --color-surface-0: #ffffff;
  --color-surface-1: #f5f5f5;
  --color-surface-2: #ececec;
  --color-surface-3: #e3e3e3;
  --color-surface-4: #dbdbdb;
  --color-surface-accent-0: #4f69f2;
  --color-surface-accent-1: #4f69f21a;

  /* Surface borders */
  --color-surface-border-solid-0: #ffffff;
  --color-surface-border-solid-1: #f5f5f5;
  --color-surface-border-solid-2: #ececec;
  --color-surface-border-solid-3: #e3e3e3;
  --color-surface-border-solid-4: #dbdbdb;
  --color-surface-border-solid-10: #1a1a1a;
  --color-surface-border-alpha-0: #1010100d;
  --color-surface-border-alpha-1: #1010101a;
  --color-surface-border-alpha-2: #10101033;

  /* Foreground */
  --color-surface-foreground-0: #1a1a1a;
  --color-surface-foreground-1: #353535;
  --color-surface-foreground-2: #424242;
  --color-surface-foreground-3: #616161;
  --color-surface-foreground-4: #737373;
  --color-surface-foreground-accent-0: #4f69f2;

  /* Primary */
  --color-primary-0: #4f69f2;
  --color-primary-1: #344ce7;
  --color-primary-2: #2236d2;
  --color-primary-foreground-0: #fafafa;

  /* Secondary */
  --color-secondary-0: #1a1a1a;
  --color-secondary-1: #424242;
  --color-secondary-2: #616161;
  --color-secondary-foreground-0: #ffffff;

  /* Outline */
  --color-outline-0: transparent;
  --color-outline-1: #1010101a;
  --color-outline-2: #7373731a;
  --color-outline-foreground-0: #1a1a1a;
  --color-outline-border-0: #10101033;
  --color-outline-border-1: #1010104d;
  --color-outline-border-2: #10101080;

  /* Ghost (interaction alphas — design.md colors.ghost-*) */
  --color-ghost-0: rgba(115, 115, 115, 0);
  --color-ghost-1: rgba(115, 115, 115, 0.1);
  --color-ghost-2: rgba(115, 115, 115, 0.15);
  --color-ghost-foreground-0: #1a1a1a;

  /* Emphasis (rosa Magnific) */
  --color-emphasis-0: #ff58ae;
  --color-emphasis-1: #ff389f;
  --color-emphasis-2: #ff1a90;
  --color-emphasis-foreground-0: #101010;

  /* Premium */
  --color-premium-0: #feb602;
  --color-premium-1: #f4980a;
  --color-premium-2: #ea7e11;
  --color-premium-foreground-0: #1a1a1a;

  /* Panel */
  --color-panel-0: #f5f5f5;
  --color-panel-2: #fafafa;
  --color-panel-4: #ffffff;
  --color-panel-6: #fcfcfc;

  /* Overlay */
  --color-overlay-dialog: #101010cc;
  --color-overlay-thumbnail: #00000033;

  /* Blurred (glass — design.md colors.blurred-*) */
  --color-blurred-0: rgba(255, 255, 255, 0.25);
  --color-blurred-1: rgba(255, 255, 255, 0.35);
  --color-blurred-2: rgba(255, 255, 255, 0.4);
  --color-blurred-foreground-0: #1a1a1a;

  /* Marketing */
  --color-marketing-surface-0: #f4f3ef;
  --color-marketing-primary-0: #2c0000;
  --color-marketing-primary-foreground-0: #fafafa;

  /* ------------------------------------------------------------------
     Tipografía — design.md v17 {typography.*}
     ------------------------------------------------------------------ */

  /* Familias */
  --font-sans: "Geist", Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-alternate: "ES Klarheit Plakat FP", "Helvetica Neue", Helvetica,
    Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;
  /* Alias legado usado por componentes existentes */
  --font-display: var(--font-alternate);

  /* Escala de tamaños {typography.size} */
  --text-2xs: 10px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 28px;
  --text-4xl: 32px;
  --text-5xl: 36px;
  --text-6xl: 44px;
  --text-7xl: 56px;
  --text-8xl: 64px;
  --text-9xl: 72px;

  /* Pesos {typography.weight} */
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Line-heights por familia {typography.line-height} */
  --leading-sans-2xs: 1.6;
  --leading-sans-xs: 1.5;
  --leading-sans-sm: 1.6;
  --leading-sans-base: 1.6;
  --leading-sans-lg: 1.5;
  --leading-sans-xl: 1.5;
  --leading-sans-2xl: 1.5;
  --leading-sans-3xl: 1.375;
  --leading-alternate-base: 1.2;
  --leading-alternate-lg: 1.2;
  --leading-alternate-xl: 1.2;
  --leading-alternate-2xl: 1.2;
  --leading-alternate-3xl: 1.2;
  --leading-alternate-4xl: 1;
  --leading-alternate-5xl: 1;
  --leading-alternate-6xl: 1;
  --leading-alternate-7xl: 1;
  --leading-alternate-8xl: 1;
  --leading-alternate-9xl: 1;
  --leading-mono-2xs: 1.6;
  --leading-mono-xs: 1.5;
  --leading-mono-sm: 1.6;
  --leading-mono-base: 1.6;
  --leading-mono-lg: 1.5;

  /* Letter-spacing por familia {typography.letter-spacing} */
  --tracking-sans-2xs: 0.02em;
  --tracking-sans-3xl: -0.01em;
  --tracking-sans: 0;
  --tracking-alternate: -0.01em;
  --tracking-mono: 0;

  /* OpenType features por familia {typography.font-feature-settings}
     ss02/ss03 son de Geist (a/l alternativas) — NUNCA en :root/body global
     para que no cascadeen a ES Klarheit (activaría su a/g con muesca). */
  --font-feature-settings-sans: "ss02" on, "ss03" on;
  --font-feature-settings-alternate: normal;
  --font-feature-settings-monospace: normal;

  /* Radio y layout */
  --radius-xs: 2px; /* rounded-sm de design.md: pozos de media */
  --radius-sm: 4px; /* rounded-base de design.md: filas de menú, badges */
  --radius-base: 8px; /* rounded-lg de design.md: botones, inputs, tooltips */
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px; /* rounded-full */
  --container-max: 1536px; /* max-w-screen-2xl */
  --container-pad: 32px;

  /* Motion {design.md L892-894}: hover/press 150ms, resto 250ms,
     easing único del sistema — no bounce, no spring, no scale */
  --duration-fast: 0.15s;
  --duration-base: 0.25s;
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

  /* Iconos {design.md icon-size.*}: render solo desde token, nunca arbitrario */
  --icon-size-3xs: 10px;
  --icon-size-xs: 14px;
  --icon-size-sm: 16px;
  --icon-size-md: 20px;

  /* Blur {design.md blur.*}: pasos de backdrop/layer blur */
  --blur-sm: 4px;
  --blur-base: 8px;
  --blur-md: 12px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --blur-2xl: 40px;
  --blur-3xl: 56px;

  /* Inputs {design.md familia form-*} */
  --color-form-0: #ffffff;
  --color-form-foreground-0: #737373; /* = surface-foreground-4, placeholder */
  --color-form-border-active: #101010;

  /* Tinta sobre media {design.md L735}: theme-stable, no invierte */
  --color-media-foreground-0: #fafafa;
}