/* ============================================================================
   GAP DISCOVERY — DESIGN TOKENS
   Theme: ShlomoChange / IMPACT!  (bright, light)
   ----------------------------------------------------------------------------
   Two layers:
     LAYER 1 — BRAND PRIMITIVES  → raw palette. Swap this block to re-skin the
               whole system for another client (Factor127, Messieurs, Kizner…).
     LAYER 2 — SEMANTIC TOKENS   → role-based names. Components use ONLY these,
               never the raw brand vars. Change a primitive, everything follows.
   Source palette: HOPE / IMPACT! brand (indigo #415AF4, verde #37EA8C,
   naranja #FF603F, lima #BCF72D, violeta #9B1EFF).
   ============================================================================ */

/* ============================================================================
   LAYER 1 — BRAND PRIMITIVES   (the swappable theme layer)
   ============================================================================ */
:root {
  /* Brand hues */
  --brand-indigo:     #415AF4;   /* primary            */
  --brand-indigo-d:   #232D69;   /* deep / inverse bg  */
  --brand-verde:      #37EA8C;   /* success / grow     */
  --brand-naranja:    #FF603F;   /* danger / pain      */
  --brand-lima:       #BCF72D;   /* warning / watch    */
  --brand-violeta:    #9B1EFF;   /* accent / dream     */

  /* Core */
  --brand-white:      #FFFFFF;
  --brand-ink:        #14162B;   /* near-black, indigo cast */

  /* Cool neutral ramp (indigo-tinted) */
  --gray-50:  #F6F7FB;
  --gray-100: #EEF0F7;
  --gray-200: #E1E4EF;
  --gray-300: #CBD0E1;
  --gray-400: #A2A9C4;
  --gray-500: #757D9E;
  --gray-600: #545C7E;
  --gray-700: #3A4162;
  --gray-800: #262C49;
  --gray-900: #14162B;

  /* Soft brand tints (for pill / chip / alert backgrounds) */
  --tint-indigo:   rgba(65, 90, 244, 0.10);
  --tint-verde:    rgba(55, 234, 140, 0.16);
  --tint-naranja:  rgba(255, 96, 63, 0.12);
  --tint-lima:     rgba(188, 247, 45, 0.20);
  --tint-violeta:  rgba(155, 30, 255, 0.12);
}

/* ============================================================================
   LAYER 2 — SEMANTIC TOKENS   (components reference these only)
   ============================================================================ */
:root {
  /* ---- Actions / brand ---- */
  --color-primary:         var(--brand-indigo);
  --color-primary-strong:  var(--brand-indigo-d);
  --color-on-primary:      var(--brand-white);
  --color-accent:          var(--brand-verde);
  --color-on-accent:       var(--brand-ink);   /* verde/lima are light → dark text */

  /* ---- Surfaces ---- */
  --surface-canvas:        var(--gray-50);      /* app background behind cards   */
  --surface-page:          var(--brand-white);  /* content background            */
  --surface-card:          var(--brand-white);
  --surface-sunken:        var(--gray-100);
  --surface-inverse:       var(--brand-indigo-d);
  --surface-brand-soft:    var(--tint-indigo);

  /* ---- Borders ---- */
  --border:                var(--gray-200);
  --border-strong:         var(--gray-300);
  --border-focus:          var(--brand-indigo);

  /* ---- Text ---- */
  --text-strong:           var(--brand-ink);
  --text:                  var(--gray-700);
  --text-muted:            var(--gray-500);
  --text-subtle:           var(--gray-400);
  --text-inverse:          var(--brand-white);
  --text-on-accent:        var(--brand-ink);
  --text-link:             var(--brand-indigo);

  /* ---- Status / gap semaphore ---------------------------------------------
     Gap health = how much of the brecha is closed:
       healthy  ≥ 75%   watch 40–74%   critical < 40%   none = sin iniciar   */
  --status-success:        var(--brand-verde);
  --status-warning:        var(--brand-lima);
  --status-danger:         var(--brand-naranja);
  --status-info:           var(--brand-indigo);

  --gap-healthy:           var(--brand-verde);
  --gap-watch:             var(--brand-lima);
  --gap-critical:          var(--brand-naranja);
  --gap-none:              var(--gray-300);

  /* ---- Signals (interview → Airtable) -------------------------------------
     pain / opportunity / dream / idea → mapped onto the brand accents.       */
  --signal-pain:           var(--brand-naranja);
  --signal-opportunity:    var(--brand-verde);
  --signal-dream:          var(--brand-violeta);
  --signal-idea:           var(--brand-lima);
  --signal-pain-soft:      var(--tint-naranja);
  --signal-opportunity-soft: var(--tint-verde);
  --signal-dream-soft:     var(--tint-violeta);
  --signal-idea-soft:      var(--tint-lima);

  /* ---- Opportunity class buckets ---- */
  --oclass-skilling:       var(--brand-indigo);   /* Skilling up            */
  --oclass-efficiency:     var(--brand-verde);    /* Operational efficiency */
  --oclass-growth:         var(--brand-violeta);  /* Growth                 */

  /* ---- Roles (IMPACT! 5-tier) ---- */
  --role-admin:            var(--brand-naranja);  /* ADMIN                  */
  --role-exec:             var(--brand-indigo);   /* CLIENT_EXECUTIVE (L1)  */
  --role-manager:          var(--brand-verde);    /* MANAGER (L2)           */
  --role-operator:         var(--brand-lima);     /* OPERATOR (L3)          */
  --role-consultant:       var(--brand-violeta);  /* CONSULTANT_EDITOR      */

  /* ---- Typography ---------------------------------------------------------
     System sans → fast, offline-safe, and script-agnostic (ES + HE).        */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Noto Sans Hebrew", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas,
               "DejaVu Sans Mono", monospace;

  --font-size-xs:   0.75rem;   /* 12 */
  --font-size-sm:   0.875rem;  /* 14 */
  --font-size-base: 1rem;      /* 16 */
  --font-size-lg:   1.125rem;  /* 18 */
  --font-size-xl:   1.375rem;  /* 22 */
  --font-size-2xl:  1.75rem;   /* 28 */
  --font-size-3xl:  2.25rem;   /* 36 */
  --font-size-4xl:  3rem;      /* 48 */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;

  /* ---- Spacing scale (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;

  /* ---- Radii ---- */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-pill: 999px;

  /* ---- Elevation (soft, indigo-tinted) ---- */
  --shadow-sm: 0 1px 3px rgba(20, 22, 43, 0.08);
  --shadow-md: 0 4px 20px rgba(20, 22, 43, 0.08);
  --shadow-lg: 0 8px 30px rgba(65, 90, 244, 0.15);

  /* ---- Interaction ---- */
  --ring:       0 0 0 3px rgba(65, 90, 244, 0.35);
  --transition: 160ms ease;

  /* ---- Gradients (his HOPE header / accent) ---- */
  --gradient-brand:  linear-gradient(135deg, var(--brand-indigo) 0%, var(--brand-indigo-d) 100%);
  --gradient-accent: linear-gradient(135deg, var(--brand-verde) 0%, var(--brand-lima) 100%);

  /* ---- Layout ---- */
  --container-max: 1200px;
}

/* ============================================================================
   ENGINE BRAND — Factor127   (the "powered by" mark)
   Fixed on purpose: this is Ran's company mark, NOT part of the client theme,
   so it does NOT get swapped when re-skinning Layer 1 for another client.
   ============================================================================ */
:root {
  --engine-magenta: #CC33FF;
  --engine-gold:    #F0C674;
}