/* ============================================================
   PARKER SOLUTIONS — DESIGN TOKENS
   Color + Typography foundation
   v1.0 · 2025
   ============================================================ */

/* Self-hosted Chakra Petch — brand-supplied TTF files in /fonts/. */

@font-face {
  font-family: 'Chakra Petch';
  src: url('../fonts/ChakraPetch-Light.woff2') format('woff2'), url('../fonts/ChakraPetch-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('../fonts/ChakraPetch-LightItalic.woff2') format('woff2'), url('../fonts/ChakraPetch-LightItalic.ttf') format('truetype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('../fonts/ChakraPetch-Regular.woff2') format('woff2'), url('../fonts/ChakraPetch-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('../fonts/ChakraPetch-Italic.woff2') format('woff2'), url('../fonts/ChakraPetch-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('../fonts/ChakraPetch-Medium.woff2') format('woff2'), url('../fonts/ChakraPetch-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('../fonts/ChakraPetch-MediumItalic.woff2') format('woff2'), url('../fonts/ChakraPetch-MediumItalic.ttf') format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('../fonts/ChakraPetch-SemiBold.woff2') format('woff2'), url('../fonts/ChakraPetch-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('../fonts/ChakraPetch-SemiBoldItalic.woff2') format('woff2'), url('../fonts/ChakraPetch-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('../fonts/ChakraPetch-Bold.woff2') format('woff2'), url('../fonts/ChakraPetch-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('../fonts/ChakraPetch-BoldItalic.woff2') format('woff2'), url('../fonts/ChakraPetch-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {
  /* ============================================================
     BRAND COLORS
     ============================================================ */
  --parker-primary:         #4f61e0;   /* texto y botones en claro: 5,1:1 sobre blanco (antes #6b7df5, 3,6:1) */
  --parker-primary-brand:   #6b7df5;   /* tono de marca original, para decoración */
  --btn-primary-bg:         #4f61e0;
  --parker-primary-light:   #8a99f7;
  --parker-primary-lighter: #c5ccfb;
  --parker-primary-dark:    #3f50c8;
  --parker-primary-darker:  #3040b0;

  --parker-secondary:        #4d4d4d;
  --parker-secondary-light:  #6e6e6e;
  --parker-secondary-lighter:#a0a0a0;
  --parker-secondary-dark:   #333333;
  --parker-secondary-darker: #1a1a1a;

  --parker-accent-teal:      #a0f9d2;
  --parker-accent-teal-dark: #3ec995;
  --parker-accent-orange:    #d47046;
  --parker-accent-orange-dark:#b05830;

  /* ============================================================
     PRIMARY RAMP (indigo)
     ============================================================ */
  --primary-50:  #eceffe;
  --primary-100: #c5ccfb;
  --primary-200: #9eaaf8;
  --primary-300: #8a99f7;
  --primary-400: #6b7df5;
  --primary-500: #6b7df5;
  --primary-600: #4a5bd3;
  --primary-700: #3040b0;
  --primary-800: #1e2a8a;
  --primary-900: #0f1660;

  /* ============================================================
     NEUTRAL RAMP (blue-tinted darks)
     ============================================================ */
  --neutral-0:   #ffffff;
  --neutral-50:  #f8f8fc;
  --neutral-100: #f0f0f8;
  --neutral-200: #e4e4ef;
  --neutral-300: #d0d0e2;
  --neutral-400: #b0b0cc;
  --neutral-500: #8080a8;
  --neutral-600: #606080;
  --neutral-700: #404060;
  --neutral-800: #2a2a48;
  --neutral-900: #18182e;
  --neutral-950: #0e0e1e;

  /* ============================================================
     SEMANTIC COLORS
     ============================================================ */
  --color-success:    #3ec995;
  --color-success-bg: #d4f7ec;
  --color-warning:    #d47046;
  --color-warning-bg: #faebd6;
  --color-error:      #e05252;
  --color-error-bg:   #fce8e8;
  --color-info:       #6b7df5;
  --color-info-bg:    #eceffe;

  /* ============================================================
     THEME TOKENS — light mode (default)
     These are the only tokens that flip in .dark
     ============================================================ */

  /* Surfaces */
  --bg-page:        var(--neutral-50);
  --bg-surface:     var(--neutral-0);
  --bg-sunken:      var(--neutral-100);
  --bg-emphasis:    var(--neutral-0);
  --bg-emphasis-2:  var(--neutral-100);

  /* Navbar glass */
  --nav-bg:         rgba(255, 255, 255, 0.92);
  --nav-border:     rgba(107, 125, 245, 0.18);
  --nav-shadow:     0 8px 32px rgba(14, 14, 30, 0.08);

  /* Text */
  --text-strong:    var(--neutral-900);
  --text-body:      var(--neutral-700);
  --text-muted:     #6e6e96;   /* 4,6:1 sobre el fondo claro (antes neutral-500, 3,6:1) */
  --text-soft:      #6e6e96;

  /* Text on emphasis surfaces (flip with theme) */
  --text-on-emphasis:        var(--neutral-900);
  --text-on-emphasis-body:   var(--neutral-700);
  --text-on-emphasis-muted:  #62628a;   /* 4,5:1 o más sobre las superficies claras */
  --text-on-emphasis-soft:   #6e6e96;

  /* Tints over emphasis surfaces (sub-cards, hairlines) */
  --tint-emphasis-04: rgba(14, 14, 30, 0.04);
  --tint-emphasis-08: rgba(14, 14, 30, 0.06);

  /* ============================================================
     LEGACY ALIASES — wired to theme tokens
     ============================================================ */
  --fg-1: var(--text-strong);
  --fg-2: var(--text-body);
  --fg-3: var(--text-muted);
  --fg-4: var(--text-soft);
  --fg-inverse: var(--neutral-0);

  --bg-1: var(--bg-page);
  --bg-2: var(--bg-surface);
  --bg-3: var(--bg-sunken);
  --bg-inverse: var(--neutral-950);

  --border-1: rgba(107, 125, 245, 0.15);
  --border-2: rgba(107, 125, 245, 0.25);
  --border-3: rgba(107, 125, 245, 0.45);
  --border-brand: var(--parker-primary);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-display: 'Chakra Petch', system-ui, sans-serif;
  --font-body:    'Chakra Petch', system-ui, sans-serif;
  --font-mono:    'Courier New', ui-monospace, monospace;

  --fs-display-xl: 56px;
  --fs-display-l:  40px;
  --fs-h1: 32px;
  --fs-h2: 24px;
  --fs-h3: 20px;
  --fs-h4: 17px;
  --fs-body-lg: 16px;
  --fs-body:    14px;
  --fs-body-sm: 13px;
  --fs-caption: 11px;
  --fs-mono:    12px;

  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-base:    1.6;
  --lh-relaxed: 1.7;

  --ls-tightest: -0.03em;
  --ls-tighter:  -0.02em;
  --ls-tight:    -0.01em;
  --ls-normal:    0;
  --ls-wide:      0.04em;
  --ls-wider:     0.06em;
  --ls-widest:    0.1em;

  /* ============================================================
     SPACING (4px base)
     ============================================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ============================================================
     RADII
     ============================================================ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ============================================================
     SHADOWS — soft indigo glow
     ============================================================ */
  --shadow-sm:   0 1px 3px rgba(107, 125, 245, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 4px 16px rgba(107, 125, 245, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg:   0 8px 32px rgba(107, 125, 245, 0.16), 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-xl:   0 16px 48px rgba(107, 125, 245, 0.20), 0 8px 16px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 32px rgba(107, 125, 245, 0.35);
  --shadow-glow-teal: 0 0 32px rgba(160, 249, 210, 0.35);

  /* ============================================================
     TRANSITIONS
     ============================================================ */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-max: 1280px;
  --sidebar-width: 280px;
}

/* ============================================================
   DARK MODE — flips theme tokens only
   Brand colors, accents, glows and shadows stay the same.
   ============================================================ */
.dark {
  /* En oscuro el texto de marca vuelve al tono original, que ya contrasta (5,3:1) */
  --parker-primary:         #6b7df5;
  --parker-primary-dark:    #4a5bd3;

  /* Surfaces */
  --bg-page:        var(--neutral-950);
  --bg-surface:     var(--neutral-900);
  --bg-sunken:      var(--neutral-800);
  --bg-emphasis:    var(--neutral-950);
  --bg-emphasis-2:  var(--neutral-900);

  /* Navbar glass */
  --nav-bg:         rgba(14, 14, 30, 0.92);
  --nav-border:     rgba(107, 125, 245, 0.18);
  --nav-shadow:     0 8px 32px rgba(14, 14, 30, 0.35);

  /* Text */
  --text-strong:    var(--neutral-50);
  --text-body:      var(--neutral-300);
  --text-muted:     var(--neutral-400);
  --text-soft:      var(--neutral-500);

  /* Text on emphasis surfaces */
  --text-on-emphasis:        var(--neutral-50);
  --text-on-emphasis-body:   rgba(255, 255, 255, 0.85);
  --text-on-emphasis-muted:  rgba(255, 255, 255, 0.6);
  --text-on-emphasis-soft:   rgba(255, 255, 255, 0.55);

  /* Tints over emphasis surfaces */
  --tint-emphasis-04: rgba(255, 255, 255, 0.04);
  --tint-emphasis-08: rgba(255, 255, 255, 0.08);

  /* Legacy alias overrides for inverse */
  --bg-inverse: var(--neutral-0);
  --fg-inverse: var(--neutral-950);
}

/* ============================================================
   SEMANTIC TYPE RULES
   ============================================================ */

html { font-family: var(--font-body); color: var(--fg-2); }

.t-display-xl,
h1.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tightest);
  color: var(--fg-1);
}

.t-display-l {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-l);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  color: var(--fg-1);
}

.t-h1, h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tighter);
  color: var(--fg-1);
}

.t-h2, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-h3, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-h4, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.t-body, p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.t-body-sm {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-base);
  color: var(--fg-3);
}

.t-caption,
.t-label {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-mono, code, kbd {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--parker-primary-dark);
}

/* Foco visible para quien navega con teclado */
:focus-visible{ outline:3px solid var(--parker-primary); outline-offset:2px; border-radius:4px; }
.dark :focus-visible{ outline-color:var(--parker-primary-light); }