/* =============================================================================
   Cobranzo brand · colors
   ─────────────────────────────────────────────────────────────────────────────
   Brand palette + semantic status + brand shadows. All tokens use the `--cob-*`
   prefix so they coexist with the legacy `--color-*` palette in colors.css
   without collision. Load only from layouts that opt in (e.g. landing v2).
   ============================================================================= */

:root {
  /* Brand palette */
  --cob-navy:        #182752;
  --cob-navy-dark:   #0f1935;
  --cob-navy-mid:    #26409a;
  --cob-terra:       #bc4a33;  /* primary CTA — ~5.6:1 on cream, AA safe */
  --cob-terra-h:     #a94129;  /* terra hover */
  --cob-terra-soft:  #e9a899;  /* tints / illustration fills / terra-on-dark */
  --cob-terra-on-dark: #e9a899;
  --cob-terra-bright:#cb563d;  /* legacy bright terra — decorative tints only */
  --cob-cream:       #faf7f0;  /* page background */
  --cob-cream-dark:  #f3efe6;  /* alternated background, subtle panels */
  --cob-ink:         #111827;  /* primary text */
  --cob-ink-2:       #374151;  /* secondary text */
  --cob-muted:       #6b7280;  /* captions, meta */
  --cob-border:      #e2ddd5;  /* default hairline */
  --cob-border-2:    #d6cfc0;  /* stronger hairline */

  /* Semantic status (pair with -bg for surfaces and -ink for text on the bg) */
  --cob-success:     #2f7a55;
  --cob-success-bg:  #e4efe7;
  --cob-warning:     #b9822f;  /* icons/fills only — text uses --cob-warning-ink */
  --cob-warning-ink: #8a5f1e;
  --cob-warning-bg:  #f7ecd5;
  --cob-danger:      #b4452c;
  --cob-danger-ink:  #8a3321;
  --cob-danger-bg:   #f3dcd2;
  --cob-red:         #d92d20;  /* critical red — vivid fills, badges, destructive CTA */
  --cob-red-h:       #b42318;  /* hover */
  --cob-red-ink:     #b42318;  /* text-safe (AA on cream) */
  --cob-red-soft:    #f0a99f;  /* tint */
  --cob-red-bg:      #fbe4e2;
  --cob-info:        #2a5ba3;
  --cob-info-ink:    #1f4482;
  --cob-info-bg:     #dfe7f2;

  /* Channel — WhatsApp brand green (button + outgoing-bubble in mocks) */
  --cob-wa:          #25d366;
  --cob-wa-h:        #1fb359;

  /* Foreground / background semantic tokens */
  --cob-fg-1:         var(--cob-ink);
  --cob-fg-2:         var(--cob-ink-2);
  --cob-fg-3:         var(--cob-muted);
  --cob-fg-on-dark:   var(--cob-cream);
  --cob-fg-on-dark-2: #c8cee0;
  --cob-bg-1:         var(--cob-cream);
  --cob-bg-2:         var(--cob-cream-dark);
  --cob-bg-3:         #ffffff;
  --cob-bg-dark:      var(--cob-navy);
  --cob-bg-dark-2:    var(--cob-navy-dark);

  /* Elevation — shadows are tinted navy, never pure black */
  --cob-shadow-1: 0 1px 2px rgb(24 39 82 / 0.06), 0 1px 1px rgb(24 39 82 / 0.04);
  --cob-shadow-2: 0 4px 12px rgb(24 39 82 / 0.08), 0 1px 2px rgb(24 39 82 / 0.05);
  --cob-shadow-3: 0 12px 32px rgb(24 39 82 / 0.12), 0 2px 6px rgb(24 39 82 / 0.06);
  --cob-shadow-4: 0 24px 64px rgb(24 39 82 / 0.18), 0 4px 12px rgb(24 39 82 / 0.08);
  --cob-shadow-inset:       inset 0 1px 0 rgb(255 255 255 / 0.6);
  --cob-focus-ring:         0 0 0 3px rgb(188 74 51 / 0.32);  /* terra halo on cream */
  --cob-focus-ring-on-dark: 0 0 0 3px rgb(250 247 240 / 0.55); /* cream halo on dark */
}

/* Surface helpers (opt-in — the global app layouts don't need these) */
.cob-bg-cream      { background: var(--cob-bg-1); color: var(--cob-fg-1); }
.cob-bg-cream-dark { background: var(--cob-bg-2); color: var(--cob-fg-1); }
.cob-bg-white      { background: var(--cob-bg-3); color: var(--cob-fg-1); }
.cob-bg-navy       { background: var(--cob-bg-dark);   color: var(--cob-fg-on-dark); }
.cob-bg-navy-deep  { background: var(--cob-bg-dark-2); color: var(--cob-fg-on-dark); }