/* ============================================================
   RoboPanda brand stylesheet (self-contained).
   Load with:  <link rel="stylesheet" href="assets/brand/brand.css">
   Font files live in ./fonts, images in ./img (paths are relative
   to THIS file, so it works wherever it is served from).
   ============================================================ */

@font-face{font-family:"Baloo Bhaijaan 2";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/BalooBhaijaan2-Regular.ttf") format("truetype");}
@font-face{font-family:"Baloo Bhaijaan 2";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/BalooBhaijaan2-Medium.ttf") format("truetype");}
@font-face{font-family:"Baloo Bhaijaan 2";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/BalooBhaijaan2-SemiBold.ttf") format("truetype");}
@font-face{font-family:"Baloo Bhaijaan 2";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/BalooBhaijaan2-Bold.ttf") format("truetype");}
@font-face{font-family:"Baloo Bhaijaan 2";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/BalooBhaijaan2-ExtraBold.ttf") format("truetype");}

:root{
  /* Brand trinity
     ------------------------------------------------------------------
     THE BRAND COLOUR IS --cyan-400: #36a0b9  =  hsl(191.5, 55%, 47%)

     The whole ladder is generated from that one value: same hue, same
     family, only the lightness moves. Change #36a0b9 and regenerate the
     rest rather than nudging individual steps, or the tints drift apart
     and screens start looking like different products.

     The previous ladder was built around a much paler #36a0b9, which is
     why buttons and headings across the apps read as a different, lighter
     blue than the platform. It also measured 2.04:1 against white — white
     text on it was barely legible. This one measures 3.05:1.
     ------------------------------------------------------------------ */
  --cyan-50:#edf8fa;--cyan-100:#cfedf4;--cyan-200:#a7dde9;--cyan-300:#6dc3d7;
  --cyan-400:#36a0b9;--cyan-500:#288aa1;--cyan-600:#1f7387;--cyan-700:#165c6c;
  --pink-50:#fff0f4;--pink-100:#ffd9e3;--pink-200:#ffb3c8;--pink-300:#fc82a4;
  --pink-400:#f84f7a;--pink-500:#ed3567;--pink-600:#cf2253;--pink-700:#a81945;
  /* Sky is the SECOND blue — the one charts use for a second series, never a
     stand-in for the brand.

     It used to sit 3.8 degrees from the brand in hue at 94% saturation against
     the brand's 55%: the same colour shouting. Wherever the two met in a
     gradient it read as one pale cyan mass that was not the brand. Moved to
     hue 208 and the brand's own saturation, it now reads as a companion —
     still clearly a different series on a chart, no longer a rival identity. */
  --sky-50:#edf4fa;--sky-100:#d2e3f2;--sky-200:#a8c8e3;--sky-300:#6ea1cf;--sky-400:#3a7cb6;--sky-500:#2b6394;
  --yellow-300:#ffe08a;--yellow-400:#ffc93c;--yellow-500:#f5ad12;
  --ink-900:#1d2b36;--ink-700:#3a4a57;--ink-500:#5f7180;--ink-400:#8597a4;--ink-300:#b3c1cc;
  --grey-50:#f6f9fb;--grey-100:#eef3f7;--grey-200:#e0e8ee;--grey-300:#cdd9e1;--white:#fff;
  --success-400:#34c878;--success-50:#e4f8ee;--warning-400:#ffc93c;--warning-50:#fff5da;
  --danger-400:#f84f7a;--danger-50:#fff0f4;

  /* Semantic aliases */
  --color-primary:var(--cyan-400);--color-primary-hover:var(--cyan-500);--color-primary-press:var(--cyan-600);--color-primary-soft:var(--cyan-50);
  --color-secondary:var(--pink-400);--color-secondary-hover:var(--pink-500);--color-secondary-soft:var(--pink-50);
  --color-accent:var(--yellow-400);
  --text-strong:var(--ink-900);--text-body:var(--ink-700);--text-muted:var(--ink-500);--text-faint:var(--ink-400);--text-on-brand:var(--white);
  --surface-page:var(--grey-50);--surface-card:var(--white);--surface-sunk:var(--grey-100);
  --border-soft:var(--grey-200);--border-strong:var(--grey-300);--border-brand:var(--cyan-300);
  --focus-ring:var(--cyan-300);

  /* Shape & motion */
  --radius-card:24px;--radius-md:16px;--radius-pill:999px;
  --shadow-card:0 12px 32px rgba(29,43,54,.10);--shadow-soft:0 6px 18px rgba(29,43,54,.08);
  --glow-cyan:0 8px 24px rgba(54,160,185,.35);--glow-pink:0 8px 24px rgba(248,79,122,.32);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --font-brand:"Baloo Bhaijaan 2","Segoe UI",Tahoma,sans-serif;
}

/* Base helpers (opt-in) */
.rp-font{font-family:var(--font-brand);}
.rp-btn{font-family:var(--font-brand);border:none;border-radius:var(--radius-pill);font-weight:800;cursor:pointer;transition:transform .15s var(--ease-spring),box-shadow .15s,filter .15s;}
.rp-btn:hover{transform:translateY(-1px);}
.rp-btn-primary{background:var(--color-primary);color:var(--text-on-brand);box-shadow:var(--glow-cyan);}
.rp-btn-primary:hover{background:var(--color-primary-hover);}
.rp-btn-secondary{background:var(--color-secondary);color:var(--text-on-brand);box-shadow:var(--glow-pink);}
.rp-card{background:var(--surface-card);border-radius:var(--radius-card);box-shadow:var(--shadow-card);}
.rp-pill{border-radius:var(--radius-pill);}
@keyframes rp-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.rp-bob{animation:rp-bob 3s ease-in-out infinite;}