/* =====================================================================
   Idealmente Creativo · colors_and_type.css
   ---------------------------------------------------------------------
   White-ground, Pop-style. Saturated brand hues do the work.
   Single source of truth for all design tokens.
       <link rel="stylesheet" href="colors_and_type.css" />
   ===================================================================== */

/* ---------- Web font: Montserrat (Google Fonts) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

:root {
  /* =================================================================
     COLOUR — neutrals (white-ground, no cream)
     ================================================================= */
  --ic-bg:          #FFFFFF;   /* primary surface — pure white */
  --ic-paper:       #FFFFFF;   /* alias */
  --ic-surface-2:   #F4F4F4;   /* secondary surface, very light grey */
  --ic-ink:         #0E0F12;   /* primary text / dark surface */
  --ic-ink-soft:    #2A2C33;   /* secondary text */
  --ic-ink-mute:    #6B6E78;   /* tertiary text, captions */
  --ic-hairline:    rgba(14, 15, 18, 0.10);   /* card borders */
  --ic-hairline-2:  rgba(14, 15, 18, 0.05);   /* dividers, table rules */

  /* =================================================================
     COLOUR — six service hues + deep/soft companions
     Saturated, Pop. No tinting.
     ================================================================= */

  /* Idealmente Creativo  · MORADO · master brand */
  --ic-purple:        #5A28C8;
  --ic-purple-deep:   #43179E;
  --ic-purple-soft:   #E5DAF9;

  /* Idealmente Fotografía · ROJO */
  --ic-red:           #E22418;
  --ic-red-deep:      #B3170D;
  --ic-red-soft:      #FADAD6;

  /* Idealmente Diseño · CYAN */
  --ic-cyan:          #1BB6CC;
  --ic-cyan-deep:     #138A9C;
  --ic-cyan-soft:     #D2F0F4;

  /* Idealmente Publicidad · AMARILLO  (token name avoids the ad-blocker filter) */
  --ic-yellow:        #F4C518;
  --ic-yellow-deep:   #C99D05;
  --ic-yellow-soft:   #FCF1C8;

  /* =================================================================
     LOGO PLATE — the wordmark PNGs have a near-white (#FFFEFB) bg
     baked in, so on a white page they blend invisibly. For containers
     using a non-white bg, set `mix-blend-mode: multiply` on the logo
     <img> instead of trying to colour-match the plate.
     ================================================================= */
  --ic-logo-plate:    #FFFEFB;
  --ic-ink-plate:     #202320;  /* matches the bg baked into the dark wordmark PNG */

  /* Idealmente Edición · AZUL */
  --ic-blue:          #1F3FB2;
  --ic-blue-deep:     #142C85;
  --ic-blue-soft:     #D6DDF3;

  /* Idealmente Desarrollo · VERDE MILITAR */
  --ic-olive:         #5D6B2C;
  --ic-olive-deep:    #404B17;
  --ic-olive-soft:    #E0E4CC;

  /* =================================================================
     SEMANTIC ALIASES (so you can swap a "page colour" in one place)
     ================================================================= */
  --ic-fg:            var(--ic-ink);
  --ic-fg-2:          var(--ic-ink-soft);
  --ic-fg-3:          var(--ic-ink-mute);
  --ic-accent:        var(--ic-purple);     /* defaults to master brand */
  --ic-accent-deep:   var(--ic-purple-deep);
  --ic-accent-soft:   var(--ic-purple-soft);
  --ic-on-accent:     #FFFFFF;              /* text/ink that sits on the accent */

  /* =================================================================
     SPACING — 4 pt baseline
     ================================================================= */
  --ic-s-0:  0;
  --ic-s-1:  4px;
  --ic-s-2:  8px;
  --ic-s-3:  12px;
  --ic-s-4:  16px;
  --ic-s-5:  20px;
  --ic-s-6:  24px;
  --ic-s-7:  32px;
  --ic-s-8:  40px;
  --ic-s-9:  56px;
  --ic-s-10: 80px;
  --ic-s-11: 120px;

  /* =================================================================
     RADII — only two values, deliberately
     ================================================================= */
  --ic-r-0:     0px;       /* cards, full-bleed blocks, inputs (default) */
  --ic-r-card:  0px;       /* alias for clarity */
  --ic-r-pill:  999px;     /* buttons, chips, tags */

  /* =================================================================
     ELEVATION — almost none. One token, used sparingly.
     ================================================================= */
  --ic-shadow-menu: 0 12px 32px -8px rgba(14, 15, 18, 0.18);
  --ic-shadow-pop:  8px 8px 0 0 var(--ic-ink);  /* signature Pop offset shadow */

  /* =================================================================
     MOTION
     ================================================================= */
  --ic-ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ic-ease-snappy: cubic-bezier(0.34, 1.3, 0.64, 1);    /* a hint of overshoot, used for Pop entries */
  --ic-dur-fast:    120ms;
  --ic-dur-base:    240ms;
  --ic-dur-slow:    480ms;

  /* =================================================================
     TYPE — Montserrat. Heavy, geometric, Pop.
     ================================================================= */
  --ic-font-sans:   'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ic-font-mono:   ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --ic-w-regular:   400;
  --ic-w-medium:    500;
  --ic-w-semibold:  600;
  --ic-w-bold:      700;
  --ic-w-xbold:     800;
  --ic-w-black:     900;

  /* Sizes (clamp pairs allow the same vars to feel right at all viewport widths) */
  --ic-fs-display:  clamp(72px, 8vw, 160px);
  --ic-fs-h1:       clamp(48px, 5.2vw, 88px);
  --ic-fs-h2:       clamp(32px, 3.4vw, 56px);
  --ic-fs-h3:       clamp(22px, 2.2vw, 32px);
  --ic-fs-body:     17px;
  --ic-fs-small:    14px;
  --ic-fs-caption:  13px;

  /* Leading */
  --ic-lh-wordmark: 0.85;
  --ic-lh-display:  0.95;
  --ic-lh-heading:  1.05;
  --ic-lh-body:     1.55;

  /* Tracking (Montserrat needs slightly tighter tracking at big sizes) */
  --ic-tr-tight:    -0.04em;
  --ic-tr-snug:     -0.02em;
  --ic-tr-normal:   0;
  --ic-tr-loose:    0.06em;
}

/* =====================================================================
   BASE — page defaults
   ===================================================================== */
html, body {
  background: var(--ic-bg);
  color: var(--ic-fg);
  font-family: var(--ic-font-sans);
  font-size: var(--ic-fs-body);
  line-height: var(--ic-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =====================================================================
   SEMANTIC TYPE STYLES — use these as classes
   ===================================================================== */
.ic-wordmark {
  font-family: var(--ic-font-sans);
  font-weight: var(--ic-w-black);
  font-size: var(--ic-fs-display);
  line-height: var(--ic-lh-wordmark);
  letter-spacing: var(--ic-tr-tight);
  text-transform: lowercase;
}

.ic-h1 {
  font-weight: var(--ic-w-xbold);
  font-size: var(--ic-fs-h1);
  line-height: var(--ic-lh-display);
  letter-spacing: var(--ic-tr-snug);
}

.ic-h2 {
  font-weight: var(--ic-w-bold);
  font-size: var(--ic-fs-h2);
  line-height: var(--ic-lh-heading);
  letter-spacing: var(--ic-tr-snug);
}

.ic-h3 {
  font-weight: var(--ic-w-bold);
  font-size: var(--ic-fs-h3);
  line-height: var(--ic-lh-heading);
}

.ic-body {
  font-weight: var(--ic-w-regular);
  font-size: var(--ic-fs-body);
  line-height: var(--ic-lh-body);
}

.ic-lead {
  font-weight: var(--ic-w-medium);
  font-size: 21px;
  line-height: 1.45;
  color: var(--ic-fg-2);
}

.ic-small {
  font-weight: var(--ic-w-regular);
  font-size: var(--ic-fs-small);
  line-height: 1.5;
  color: var(--ic-fg-2);
}

.ic-caption {
  font-weight: var(--ic-w-semibold);
  font-size: var(--ic-fs-caption);
  line-height: 1.35;
  letter-spacing: var(--ic-tr-loose);
  color: var(--ic-fg-3);
}

.ic-eyebrow {
  font-weight: var(--ic-w-bold);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ic-accent);
}

.ic-mono {
  font-family: var(--ic-font-mono);
  font-size: 14px;
  line-height: 1.45;
}

/* =====================================================================
   THEME HELPERS — drop one of these on any container to retarget --ic-accent
   (svc-pub avoids the ad-blocker filter that targets "publicidad")
   ===================================================================== */
.ic-theme-creativo    { --ic-accent: var(--ic-purple); --ic-accent-deep: var(--ic-purple-deep); --ic-accent-soft: var(--ic-purple-soft); }
.ic-theme-fotografia  { --ic-accent: var(--ic-red);    --ic-accent-deep: var(--ic-red-deep);    --ic-accent-soft: var(--ic-red-soft); }
.ic-theme-diseno      { --ic-accent: var(--ic-cyan);   --ic-accent-deep: var(--ic-cyan-deep);   --ic-accent-soft: var(--ic-cyan-soft); }
.ic-theme-svc-pub     { --ic-accent: var(--ic-yellow); --ic-accent-deep: var(--ic-yellow-deep); --ic-accent-soft: var(--ic-yellow-soft); }
.ic-theme-edicion     { --ic-accent: var(--ic-blue);   --ic-accent-deep: var(--ic-blue-deep);   --ic-accent-soft: var(--ic-blue-soft); }
.ic-theme-desarrollo  { --ic-accent: var(--ic-olive);  --ic-accent-deep: var(--ic-olive-deep);  --ic-accent-soft: var(--ic-olive-soft); }

/* Dark-mode flip — apply to a section that should run on ink */
.ic-on-ink {
  --ic-bg: var(--ic-ink);
  --ic-fg: #FFFFFF;
  --ic-fg-2: rgba(255, 255, 255, 0.72);
  --ic-fg-3: rgba(255, 255, 255, 0.55);
  --ic-hairline: rgba(255, 255, 255, 0.18);
  --ic-hairline-2: rgba(255, 255, 255, 0.08);
  background: var(--ic-bg);
  color: var(--ic-fg);
}