/**
 * STRATA DESIGN SYSTEM — Design Tokens
 * Strata by Hedron — two-theme (light/dark), warm terracotta palette
 *
 * Typography:
 *   --font-display  → Bw Gradual (self-hosted) — titles only (H1–H4)
 *   --font-sans     → Roboto (Google Fonts)     — body, UI, menus, tables
 *   --font-mono     → JetBrains Mono            — numbers, amounts, IDs, code
 *
 * Usage: <link rel="stylesheet" href="/portal/css/design-tokens.css">
 */

/* ═══ GOOGLE FONTS ══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400;1,500&display=swap');

/* ═══ BW GRADUAL — brand display typeface (titles only) ════════
   Geometric sans, 7 weights × 2 styles. DEMO .otf files.
   Used for: H1–H4, eyebrows, hero display, section openers.
   Body / UI / menus / tables use Roboto.
   ─────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Bw Gradual';
  src: url('/portal/fonts/BwGradualDEMO-Thin.otf') format('opentype');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bw Gradual';
  src: url('/portal/fonts/BwGradualDEMO-ThinItalic.otf') format('opentype');
  font-weight: 100; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Bw Gradual';
  src: url('/portal/fonts/BwGradualDEMO-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bw Gradual';
  src: url('/portal/fonts/BwGradualDEMO-LightItalic.otf') format('opentype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Bw Gradual';
  src: url('/portal/fonts/BwGradualDEMO-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bw Gradual';
  src: url('/portal/fonts/BwGradualDEMO-RegularItalic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Bw Gradual';
  src: url('/portal/fonts/BwGradualDEMO-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bw Gradual';
  src: url('/portal/fonts/BwGradualDEMO-MediumItalic.otf') format('opentype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Bw Gradual';
  src: url('/portal/fonts/BwGradualDEMO-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bw Gradual';
  src: url('/portal/fonts/BwGradualDEMO-BoldItalic.otf') format('opentype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Bw Gradual';
  src: url('/portal/fonts/BwGradualDEMO-ExtraBold.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bw Gradual';
  src: url('/portal/fonts/BwGradualDEMO-ExtraBoldItalic.otf') format('opentype');
  font-weight: 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Bw Gradual';
  src: url('/portal/fonts/BwGradualDEMO-Black.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bw Gradual';
  src: url('/portal/fonts/BwGradualDEMO-BlackItalic.otf') format('opentype');
  font-weight: 900; font-style: italic; font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════ */

:root {
  /* ═══ BRAND COLORS ════════════════════════════════════════════ */
  --color-primary:          #C95230; /* terracotta — el único acento */
  --color-primary-dark:     #9D3D22;
  --color-primary-bg:       #FAEAE3; /* tint — hover bg, badge bg */
  --color-primary-gradient: linear-gradient(135deg, #C95230 0%, #A04028 100%);

  --color-secondary:        #4A9EA1; /* teal apagado */
  --color-secondary-dark:   #357173;
  --color-secondary-bg:     #D6ECED;

  /* ═══ SEMANTIC ═══════════════════════════════════════════════ */
  --color-success:      #3D9E7A;
  --color-success-dark: #2C7558;
  --color-success-bg:   #D3EFE5;

  --color-warning:      #9A6520; /* ocre oscuro — NOT amarillo */
  --color-warning-dark: #7A4E18;
  --color-warning-bg:   #F0E3D0;

  --color-danger:       #AB2C2C;
  --color-danger-dark:  #861F1F;
  --color-danger-bg:    #F5DEDE;

  --color-info:         #4A9EA1;
  --color-info-dark:    #357173;
  --color-info-bg:      #D6ECED;

  /* ═══ NEUTRALS — TEXT ════════════════════════════════════════ */
  --color-text-primary:   #1E1D1C; /* near-black cálido */
  --color-text-secondary: #514E4A;
  --color-text-tertiary:  #8A8782;
  --color-text-inverse:   #F4F2EA;

  /* Alias cortos */
  --fg1: var(--color-text-primary);
  --fg2: var(--color-text-secondary);
  --fg3: var(--color-text-tertiary);
  --fg-inverse: var(--color-text-inverse);

  /* ═══ NEUTRALS — BG ══════════════════════════════════════════ */
  --color-bg-primary:    #E4E1D8; /* body — arena cálida */
  --color-bg-secondary:  #F4F2EA;
  --color-surface:       #ECEAE1; /* card / panel */
  --color-surface-hover: #E2DFD6;
  --color-white:         #FAFAF7; /* off-white — inputs, login card */
  --color-neutral-bg:    #DEDAD1; /* rail, category headers */

  /* Alias cortos */
  --bg1: var(--color-bg-primary);
  --bg2: var(--color-surface);
  --bg3: var(--color-white);

  /* ═══ BORDERS ════════════════════════════════════════════════ */
  --color-border:       #CAC7BD;
  --color-border-light: #D6D3C9;
  --border-1: var(--color-border);
  --border-2: var(--color-border-light);

  /* ═══ TYPOGRAPHY ═════════════════════════════════════════════ */
  --font-display: 'Bw Gradual', 'Roboto', system-ui, sans-serif; /* títulos */
  --font-sans:    'Roboto', system-ui, -apple-system, sans-serif; /* body, UI */
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;     /* números */

  /* Font zones — sobreescritos dinámicamente por portal_config */
  --font-ui:      var(--font-sans);    /* body / contenido general */
  --font-menus:   var(--font-sans);    /* topbar, sidebar, navegación */
  --font-headers: var(--font-display); /* H1–H4 → Bw Gradual por defecto */
  --font-footers: var(--font-sans);    /* pie de página */

  /* Escala tipográfica — base 13.5px (compacto, UI de finanzas) */
  --font-size-xs:   11px;
  --font-size-sm:   12px;
  --font-size-base: 13.5px;
  --font-size-md:   15px;
  --font-size-lg:   16px;
  --font-size-xl:   18px;
  --font-size-2xl:  22px;
  --font-size-3xl:  32px;

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

  /* ═══ SPACING ════════════════════════════════════════════════ */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;

  /* ═══ RADII ══════════════════════════════════════════════════ */
  --radius-sm:   3px;  /* chips pequeños, badges en tabla */
  --radius-md:   6px;  /* botones, inputs — el default */
  --radius-lg:  10px;  /* cards, panels, wallets */
  --radius-xl:  14px;  /* modales */
  --radius-full: 9999px; /* pills, badges de estado */

  /* ═══ SHADOWS ════════════════════════════════════════════════ */
  --shadow:         0 1px 3px rgba(0,0,0,.07), 0 2px 8px rgba(0,0,0,.05);
  --shadow-md:      0 3px 8px rgba(0,0,0,.09), 0 6px 20px rgba(0,0,0,.06);
  --shadow-lg:      0 8px 24px rgba(0,0,0,.12), 0 16px 40px rgba(0,0,0,.08);
  --shadow-xl:      0 20px 60px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.15);
  --shadow-primary: 0 4px 14px rgba(201,82,48,.25); /* terracotta glow — solo botón primario */

  /* ═══ MOTION ═════════════════════════════════════════════════ */
  --transition-base:   all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* ═══ Z-INDEX ════════════════════════════════════════════════ */
  --z-sticky:    999;
  --z-dropdown: 1000;
  --z-modal:    1100;

  /* ═══ BREAKPOINTS ════════════════════════════════════════════ */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
}

/* ─── DARK THEME ─────────────────────────────────────────────── */
[data-theme="dark"] {
  --color-text-primary:   #E0DDD4;
  --color-text-secondary: #A8A49F;
  --color-text-tertiary:  #6A6865;
  --color-text-inverse:   #1E1D1C;

  --color-bg-primary:    #1C1B15; /* near-black cálido */
  --color-bg-secondary:  #2E2D26;
  --color-surface:       #27261F;
  --color-surface-hover: #343330;
  --color-white:         #32312A;
  --color-neutral-bg:    #2A2924;

  --color-border:        #3E3D36;
  --color-border-light:  #353430;

  --color-primary:          #D96340;
  --color-primary-dark:     #B04D30;
  --color-primary-bg:       #3F2015;
  --color-primary-gradient: linear-gradient(135deg, #D96340 0%, #B04D30 100%);

  --color-secondary-bg: #1A3637;
  --color-success:      #5AB896;
  --color-success-bg:   #173025;
  --color-warning:      #CCA040;
  --color-warning-bg:   #362610;
  --color-danger:       #D05050;
  --color-danger-bg:    #3A1818;
  --color-info:         #5AADB0;
  --color-info-bg:      #1A3637;

  --shadow:         0 1px 3px rgba(0,0,0,.3),  0 2px 8px rgba(0,0,0,.25);
  --shadow-md:      0 3px 8px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.3);
  --shadow-lg:      0 8px 24px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.35);
  --shadow-xl:      0 20px 60px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.4);
  --shadow-primary: 0 4px 14px rgba(217,99,64,.3);
}