/* ============================================================
   Produteka — Foundations
   Colors, Type, Spacing, Radii, Shadows, Motion
   ============================================================ */

/* ——— Fonts ———
   Figtree is loaded from Google Fonts (see README — the .zip upload
   was empty, so we ship the CDN version by default).
   PP Nikkei Journal is a licensed commercial family — files live in /fonts.
*/
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");

@font-face {
  font-family: "PP Nikkei Journal";
  src: url("fonts/PPNikkeiJournal-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Nikkei Journal";
  src: url("fonts/PPNikkeiJournal-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PP Nikkei Journal";
  src: url("fonts/PPNikkeiJournal-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Nikkei Journal";
  src: url("fonts/PPNikkeiJournal-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PP Nikkei Journal";
  src: url("fonts/PPNikkeiJournal-Ultrabold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Nikkei Journal";
  src: url("fonts/PPNikkeiJournal-UltraboldItalic.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ──────────────────────────────────────────────────────────
     COLOR — Core palette (sourced from Figma metadata)
     ────────────────────────────────────────────────────────── */

  /* Accents — each has a single "primary" and a single "light".
     That's it. Don't invent mid-tones; tint via opacity on the primary. */

  /* Purple — hero color */
  --pk-purple:       #7e06c8;     /* PRIMARY — buttons, pills, headlines */
  --pk-purple-light: #f6ecff;     /* soft wash / chip bg / card borders */

  /* Pink — secondary accent */
  --pk-pink:         #ef53d4;     /* highlights, badges, art */
  --pk-pink-light:   #fde4f7;     /* wash */

  /* Orange — warm action / in-progress */
  --pk-orange:       #ff673e;     /* PRIMARY ORANGE */
  --pk-orange-light: #ffe0d7;     /* tinted fill */

  /* Blue — success / highlight (replaces green; Produteka rarely uses green) */
  --pk-blue:         #1d7ed6;     /* "Completado", info highlight */
  --pk-blue-light:   #e8f2fd;     /* success fill */

  /* Legacy green aliases → redirect to blue so older refs keep working */
  --pk-green:        var(--pk-blue);
  --pk-green-light:  var(--pk-blue-light);

  /* --- Legacy aliases (so older card/kit code keeps working).
         Prefer the names above in new work. */
  --pk-purple-950: #4a0678;
  --pk-purple-800: var(--pk-purple);
  --pk-purple-700: var(--pk-purple);
  --pk-purple-600: var(--pk-purple);
  --pk-purple-500: var(--pk-purple);
  --pk-purple-400: #af68d2;
  --pk-purple-300: #c78be0;
  --pk-purple-200: var(--pk-purple-light);
  --pk-purple-100: var(--pk-purple-light);
  --pk-purple-50:  var(--pk-purple-light);
  --pk-purple-pink: var(--pk-pink);
  --pk-purple-pink-tint: var(--pk-pink-light);
  --pk-orange-600: var(--pk-orange);
  --pk-orange-100: rgba(255,103,62,0.17);
  --pk-orange-50:  var(--pk-orange-light);
  --pk-green-600:  var(--pk-blue);
  --pk-green-50:   var(--pk-blue-light);

  /* Neutrals — paper / ink */
  --pk-ink:       #000000;        /* pure black, used heavily — BRAND/POSTER */
  --pk-ink-ui:    #0b0b0c;        /* PRODUCT UI primary text & ink button */
  --pk-ink-soft:  #1c1b1f;        /* icon interiors / SIDEBAR background */
  --pk-text-2:    #322e2b;        /* shadow ink */
  --pk-gray-700:  #787878;
  --pk-gray-500:  #acacac;
  --pk-gray-400:  #d1d1d1;
  --pk-gray-300:  #dddddd;        /* PRODUCT UI default border */
  --pk-gray-200:  #d9d9d9;        /* placeholder image fill */
  --pk-bg-paper:  #f7f6f3;        /* CARD/SURFACE — warm paper */
  --pk-bg-paper-2:#fffdf9;        /* slightly lifted paper — PRODUCT UI card bg */
  --pk-bg-wash:   #f1f0ea;        /* muted wash text */
  --pk-border-soft: #e8e6df;      /* PRODUCT UI 1px section divider */
  --pk-wash-chip: #ebe9e3;        /* PRODUCT UI count-chip / neutral pill */
  --pk-red:       #b81f1f;        /* PRODUCT UI "Bloqueado" */
  --pk-red-light: #fdecec;        /* PRODUCT UI "Bloqueado" tint */
  --pk-white:     #ffffff;

  /* Semantic */
  --pk-fg-1:         var(--pk-ink);          /* primary text */
  --pk-fg-2:         var(--pk-text-2);       /* secondary text */
  --pk-fg-muted:     var(--pk-gray-700);
  --pk-fg-subtle:    var(--pk-gray-500);
  --pk-fg-on-dark:   var(--pk-white);
  --pk-fg-on-purple: var(--pk-white);
  --pk-fg-on-orange: var(--pk-white);

  --pk-bg:           var(--pk-white);
  --pk-surface:      var(--pk-bg-paper);     /* default card surface */
  --pk-surface-2:    var(--pk-bg-paper-2);
  --pk-surface-ink:  var(--pk-ink);          /* reversed / dark card */

  --pk-border:       rgba(0, 0, 0, 0.09);    /* default card border */
  --pk-border-strong:rgba(0, 0, 0, 0.3);     /* dashed/visible border */
  --pk-border-soft:  var(--pk-gray-300);

  --pk-accent:       var(--pk-purple);
  --pk-accent-warm:  var(--pk-orange);
  --pk-success:      var(--pk-blue);

  /* ──────────────────────────────────────────────────────────
     TYPE — Families & scale
     ────────────────────────────────────────────────────────── */

  --pk-font-sans:    "Figtree", ui-sans-serif, system-ui, -apple-system,
                     "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pk-font-serif:   "PP Nikkei Journal", "Times New Roman", Georgia, serif;
  --pk-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Figtree weights in use (from Figma): 400/500/600/700/800 */
  --pk-w-regular:  400;
  --pk-w-medium:   500;
  --pk-w-semibold: 600;
  --pk-w-bold:     700;
  --pk-w-xbold:    800;

  /* Tracking — Figtree runs tight (-2% to -4%), Nikkei -2% */
  --pk-track-tight:  -0.02em;
  --pk-track-xtight: -0.04em;

  /* Line-height — Figma consistently uses 0.90 for display & 1.04–1.13 for body */
  --pk-lh-display: 0.9;
  --pk-lh-tight:   0.96;
  --pk-lh-snug:    1.04;
  --pk-lh-normal:  1.13;
  --pk-lh-loose:   1.4;

  /* Size scale (rem, 16px base) */
  --pk-fs-12:   0.75rem;
  --pk-fs-14:   0.875rem;
  --pk-fs-16:   1rem;
  --pk-fs-18:   1.125rem;
  --pk-fs-20:   1.25rem;
  --pk-fs-24:   1.5rem;
  --pk-fs-30:   1.875rem;
  --pk-fs-36:   2.25rem;
  --pk-fs-48:   3rem;
  --pk-fs-60:   3.75rem;
  --pk-fs-80:   5rem;
  --pk-fs-120:  7.5rem;
  --pk-fs-160:  10rem;

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

  /* ──────────────────────────────────────────────────────────
     RADII
     Two radius vocabularies live here:
       • BRAND/POSTER (large, confident): 12 / 20 / 30 / 42
       • PRODUCT UI   (smaller, working): 8 / 12 / 14 / 16 / 24
     Use the `--pk-ui-*` set inside apps/os; use `--pk-radius-*` on
     marketing posters, decks, and landing pages.
     ────────────────────────────────────────────────────────── */
  --pk-radius-sm:  8px;
  --pk-radius-md:  12px;       /* small chips / icon tiles */
  --pk-radius-lg:  20px;       /* buttons, purple pills (BRAND) */
  --pk-radius-xl:  28px;       /* medium cards (BRAND) */
  --pk-radius-2xl: 30px;       /* status capsules (BRAND) */
  --pk-radius-3xl: 42px;       /* hero page frame (BRAND) */
  --pk-radius-pill:9999px;

  /* PRODUCT UI radii — apps/os only */
  --pk-ui-radius-input:    12px;   /* text inputs, textareas */
  --pk-ui-radius-button:   14px;   /* primary, ghost buttons */
  --pk-ui-radius-card:     16px;   /* stat cards, callouts, list rows */
  --pk-ui-radius-card-lg:  24px;   /* dashboard module cards */
  --pk-ui-radius-sidebar:  24px;   /* the floating sidebar */

  /* ──────────────────────────────────────────────────────────
     SHADOWS / ELEVATION
     Produteka uses SUBTLE shadows and INSET shadows on filled icon
     tiles. Cards mostly rely on a border, not a shadow.
     ────────────────────────────────────────────────────────── */
  --pk-shadow-xs:   0 1px 1px rgba(0,0,0,0.06);
  --pk-shadow-sm:   0 1px 2px rgba(50,46,43,0.12), 0 1px 1px rgba(0,0,0,0.06);
  --pk-shadow-md:   0 4px 12px rgba(0,0,0,0.08);
  --pk-shadow-lg:   0 12px 28px rgba(0,0,0,0.15);
  --pk-shadow-inset-tile: inset 0 4px 4px rgba(50,46,43,0.25); /* on filled icon tiles */

  /* PRODUCT UI shadows — apps/os only */
  --pk-ui-shadow-sidebar:    0 12px 30px -18px rgba(0,0,0,0.35);
  --pk-ui-shadow-button:     0 8px 22px -12px rgba(0,0,0,0.45);
  --pk-ui-shadow-button-lg:  0 10px 24px -14px rgba(0,0,0,0.45);
  --pk-ui-shadow-row-active: 0 8px 24px -16px rgba(126,6,200,0.35);
  --pk-ui-shadow-row-ink:    0 10px 24px -16px rgba(0,0,0,0.35);

  /* ──────────────────────────────────────────────────────────
     BORDERS
     ────────────────────────────────────────────────────────── */
  --pk-border-1: 1px solid var(--pk-border);
  --pk-border-2: 2px solid var(--pk-border);
  --pk-border-3: 3px solid var(--pk-border);       /* the signature 3px frame (BRAND) */
  --pk-border-3-purple: 3px solid var(--pk-purple-600);
  --pk-border-3-orange: 3px solid var(--pk-orange-600);
  --pk-border-3-blue:   3px solid var(--pk-blue);
  --pk-border-3-green:  3px solid var(--pk-blue); /* legacy alias */
  --pk-border-dashed:   1px dashed var(--pk-border-strong);

  /* PRODUCT UI borders — apps/os only. 1px, never 3px. */
  --pk-ui-border:        1px solid var(--pk-gray-300);
  --pk-ui-border-active: 1.5px solid var(--pk-ink-ui);
  --pk-ui-border-purple: 1px solid var(--pk-purple);

  /* ──────────────────────────────────────────────────────────
     MOTION
     ────────────────────────────────────────────────────────── */
  --pk-ease:      cubic-bezier(0.22, 1, 0.36, 1);   /* gentle ease-out */
  --pk-ease-in:   cubic-bezier(0.64, 0, 0.78, 0);
  --pk-dur-fast:  120ms;
  --pk-dur-med:   220ms;
  --pk-dur-slow:  420ms;
}

/* ============================================================
   SEMANTIC TYPE — ready-to-use roles
   Use as class names OR copy the declarations into your own.
   ============================================================ */

.pk-display,
.pk-h1,
.pk-h2,
.pk-h3,
.pk-serif-display,
.pk-eyebrow,
.pk-body,
.pk-body-sm,
.pk-meta,
.pk-label {
  font-family: var(--pk-font-sans);
  color: var(--pk-fg-1);
}

/* Huge Figtree ExtraBold display ("El éxito operativo" @ 160px) */
.pk-display {
  font-family: var(--pk-font-sans);
  font-weight: var(--pk-w-xbold);
  font-size: clamp(4rem, 9vw, 10rem);
  line-height: var(--pk-lh-tight);
  letter-spacing: var(--pk-track-xtight);
}

/* h1 — section-opener display (80–120px) */
.pk-h1 {
  font-weight: var(--pk-w-xbold);
  font-size: clamp(3rem, 6vw, 7.5rem);
  line-height: var(--pk-lh-tight);
  letter-spacing: var(--pk-track-xtight);
}

/* h2 — large page titles, (60–80px) "Automatizar"-scale */
.pk-h2 {
  font-weight: var(--pk-w-bold);
  font-size: clamp(2.25rem, 4vw, 4.5rem);
  line-height: var(--pk-lh-tight);
  letter-spacing: var(--pk-track-xtight);
}

/* h3 — subhead / card title */
.pk-h3 {
  font-weight: var(--pk-w-semibold);
  font-size: var(--pk-fs-30);
  line-height: var(--pk-lh-snug);
  letter-spacing: var(--pk-track-tight);
}

/* Italic serif display — the Nikkei-Journal "flourish" line */
.pk-serif-display {
  font-family: var(--pk-font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.5rem, 5vw, 6.25rem);
  line-height: 1;
  letter-spacing: var(--pk-track-tight);
}

/* Eyebrow — small caps-like pill ("Pro Tip", "Tips") */
.pk-eyebrow {
  font-weight: var(--pk-w-medium);
  font-size: var(--pk-fs-14);
  letter-spacing: 0.04em;
  color: var(--pk-fg-muted);
}

/* Body — Figtree Medium is the workhorse */
.pk-body {
  font-weight: var(--pk-w-medium);
  font-size: var(--pk-fs-18);
  line-height: var(--pk-lh-loose);
  color: var(--pk-fg-1);
}
.pk-body-sm {
  font-weight: var(--pk-w-regular);
  font-size: var(--pk-fs-14);
  line-height: var(--pk-lh-loose);
  color: var(--pk-fg-2);
}

/* Meta / captions */
.pk-meta {
  font-weight: var(--pk-w-regular);
  font-size: var(--pk-fs-12);
  line-height: var(--pk-lh-loose);
  color: var(--pk-fg-muted);
  letter-spacing: 0.01em;
}

/* Button / Pill label — Figtree Medium 50px in Figma, translate to ~1rem */
.pk-label {
  font-weight: var(--pk-w-medium);
  font-size: var(--pk-fs-16);
  line-height: var(--pk-lh-display);
  letter-spacing: var(--pk-track-tight);
}

/* Monospace (rarely used but provided) */
.pk-mono {
  font-family: var(--pk-font-mono);
  font-size: var(--pk-fs-14);
}

/* ============================================================
   PRODUCT UI TYPE — apps/os only
   The OS uses a quieter, denser type vocabulary than the brand.
   Use these `.pk-ui-*` classes inside the product. Use the brand
   classes above (`.pk-display`, `.pk-h1`, etc.) on marketing.
   ============================================================ */

/* Page H1 — sans 800, optional inline serif italic accent word.
   Example: <h1 class="pk-ui-h1">Email <em>follow-ups</em></h1>
   The <em> is automatically restyled in serif italic 300 / purple. */
.pk-ui-h1 {
  font-family: var(--pk-font-sans);
  font-weight: var(--pk-w-xbold);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--pk-ink-ui);
  margin: 0;
}
.pk-ui-h1 em {
  font-family: var(--pk-font-serif);
  font-style: italic;
  font-weight: 300;
  color: var(--pk-purple);
}

/* Display section header (serif 28px) — used for "Recent activity"-style
   sections. One per page max. */
.pk-ui-h2-display {
  font-family: var(--pk-font-serif);
  font-weight: 400;
  font-size: 1.75rem;            /* 28px */
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--pk-ink-ui);
  margin: 0;
}

/* Card title (sans 700, inline serif italic accent allowed) */
.pk-ui-card-title {
  font-family: var(--pk-font-sans);
  font-weight: var(--pk-w-bold);
  font-size: 1.5rem;             /* 24px */
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--pk-ink-ui);
}
.pk-ui-card-title em {
  font-family: var(--pk-font-serif);
  font-style: italic;
  font-weight: 300;
}

/* Stat numeral (serif 40px) */
.pk-ui-stat {
  font-family: var(--pk-font-serif);
  font-weight: 400;
  font-size: 2.5rem;             /* 40px */
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--pk-ink-ui);
}

/* Section eyebrow — 11px uppercase, paired with count chip + 1px rule */
.pk-ui-eyebrow {
  font-family: var(--pk-font-sans);
  font-size: 0.6875rem;          /* 11px */
  font-weight: var(--pk-w-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pk-gray-700);
}

/* Field label — same shape as eyebrow */
.pk-ui-field-label {
  font-family: var(--pk-font-sans);
  font-size: 0.6875rem;
  font-weight: var(--pk-w-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pk-gray-700);
  display: block;
  margin-bottom: 8px;
}

/* Body & meta */
.pk-ui-body {
  font-family: var(--pk-font-sans);
  font-weight: var(--pk-w-regular);
  font-size: 0.9375rem;          /* 15px */
  line-height: 1.5;
  color: var(--pk-ink-ui);
}
.pk-ui-body-sm {
  font-family: var(--pk-font-sans);
  font-weight: var(--pk-w-regular);
  font-size: 0.875rem;           /* 14px */
  line-height: 1.5;
  color: var(--pk-ink-ui);
}
.pk-ui-meta {
  font-family: var(--pk-font-sans);
  font-weight: var(--pk-w-regular);
  font-size: 0.75rem;            /* 12px */
  line-height: 1.4;
  color: var(--pk-gray-700);
}