/* ==========================================================================
   Flow Growth — single source of truth for colours and type.
   Values come from flowsgrowth.com/assets/css/styles.css and the contrast
   decisions in platform.flowsgrowth.com (commit 9530581).
   Colours are bare RGB channels so any alpha can be applied:
   rgb(var(--c-accent) / .2). Canvas code reads them through fgColor().
   ========================================================================== */
:root{
  /* brand */
  --c-petrol:61 90 128;          /* #3D5A80 */
  --c-petrol-800:70 98 140;      /* #46628C */
  --c-petrol-700:79 109 153;     /* #4F6D99 */
  --c-accent:201 106 61;         /* #C96A3D fills, borders, charts */
  --c-accent-soft:232 166 125;   /* #E8A67D */
  --c-accent-ink:139 74 44;      /* #8B4A2C accent-coloured text */
  --c-accent-strong:180 89 47;   /* #B4592F button gradient start */
  --c-accent-press:164 83 45;    /* #A4532D button gradient end */

  /* surfaces */
  --c-bg:242 245 244;            /* #F2F5F4 */
  --c-surface:255 255 255;       /* #FFFFFF */
  --c-card-hover:247 248 250;    /* #F7F8FA */

  /* text */
  --c-ink:11 14 51;              /* #0B0E33 */
  --c-ink-2:85 89 122;           /* #55597A */
  --c-ink-3:102 106 137;         /* #666A89 */
  --c-on-dark:255 255 255;

  /* status */
  --c-danger:180 35 24;          /* #B42318 */
  --c-warning:138 83 0;          /* #8A5300 */
  --c-success:31 122 77;         /* #1F7A4D */

  /* third-party platform colours (their brands, not ours) */
  --c-plat-facebook:24 119 242;
  --c-plat-instagram:225 48 108;
  --c-plat-snapchat:255 220 0;
  --c-plat-tiktok:105 201 208;
  --c-plat-google:234 67 53;
  --c-plat-youtube:255 0 0;

  /* semantic tokens used by the pages */
  --bg:rgb(var(--c-bg));
  --surface:rgb(var(--c-surface));
  --card:rgb(var(--c-surface));
  --card-h:rgb(var(--c-card-hover));
  --inset:rgb(var(--c-bg));
  --border:rgb(var(--c-ink) / .10);
  --border-a:rgb(var(--c-accent) / .42);
  --accent:rgb(var(--c-accent));
  --accent-ink:rgb(var(--c-accent-ink));
  --accent-strong:rgb(var(--c-accent-strong));
  --accent-d:rgb(var(--c-accent) / .12);
  --accent-g:rgb(var(--c-accent) / .28);
  --on-accent:rgb(var(--c-on-dark));
  --btn-grad:linear-gradient(255deg,rgb(var(--c-accent-strong)),rgb(var(--c-accent-press)));
  --btn-grad-hover:linear-gradient(255deg,rgb(var(--c-accent-press)),rgb(var(--c-accent-press)));
  --danger:rgb(var(--c-danger));
  --warn:rgb(var(--c-warning));
  --success:rgb(var(--c-success));
  --info:rgb(var(--c-petrol));
  --danger-bg:color-mix(in srgb,rgb(var(--c-danger)) 8%,rgb(var(--c-surface)));
  --success-bg:color-mix(in srgb,rgb(var(--c-success)) 10%,rgb(var(--c-surface)));
  --t1:rgb(var(--c-ink));
  --t2:rgb(var(--c-ink-2));
  --t3:rgb(var(--c-ink-3));
  --nav-bg:rgb(var(--c-petrol));
  --nav-line:rgb(var(--c-on-dark) / .14);
  --nav-text:rgb(var(--c-on-dark));
  --nav-mute:rgb(var(--c-on-dark) / .92);
  --glass:rgb(var(--c-surface) / .9);
  --scrim:rgb(var(--c-ink) / .4);
  --page-wash:radial-gradient(900px 360px at 100% 0%,rgb(var(--c-accent) / .07),transparent 65%);
  --sh:0 4px 32px rgb(var(--c-ink) / .10),0 1px 0 var(--border);

  /* type */
  --fn-display:'Alexandria','IBM Plex Sans Arabic',system-ui,sans-serif;
  --fn-ar:'IBM Plex Sans Arabic','Alexandria',system-ui,sans-serif;
  --fn-en:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,sans-serif;
  --fn-b:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,sans-serif;

  /* shape and motion, unchanged from the original pages */
  --r:8px; --rm:14px; --rl:20px;
  --tr:all .22s cubic-bezier(.4,0,.2,1);

  color-scheme:light;
}

::selection{background:rgb(var(--c-accent-soft) / .45);color:var(--t1)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent-strong)}

/* Headings */
h1,h2,h3,h4,.title,.section-title,.cta-title,.feature-title,.step-title,.empty-title,
.form-section-title,.chart-title,.modal-title,.dr-title{font-family:var(--fn-display)}

/* Logo */
.logo-img{display:block;height:48px;width:auto;flex-shrink:0}
.logo .logo-img{height:68px}
.footer-brand .logo-img{height:56px}

/* Petrol navigation. Two-class selectors win over each page's own rules. */
.navbar .nav-links a,.topnav .status-pill{color:var(--nav-mute)}
.navbar .nav-links a:hover{color:var(--nav-text)}
.navbar .btn-ghost,.navbar .nav-btn,.navbar .btn-lang,.topnav .ibtn-lang,.topnav .ibtn-out{
  background:rgb(var(--c-on-dark) / .05);border:1px solid var(--nav-line);color:var(--nav-mute)}
.navbar .btn-ghost:hover,.navbar .nav-btn:hover,.navbar .btn-lang:hover,
.topnav .ibtn-lang:hover,.topnav .ibtn-out:hover{
  background:rgb(var(--c-on-dark) / .12);border-color:rgb(var(--c-accent-soft) / .6);color:var(--nav-text)}
.topnav .admin-badge,.topnav .nav-avatar{
  background:rgb(var(--c-on-dark) / .12);border-color:var(--nav-line);color:var(--nav-text)}
.topnav .dot{background:rgb(var(--c-accent-soft));box-shadow:0 0 8px rgb(var(--c-accent-soft))}

/* The dashboards' nav did not fit a phone: it pushed the page to 447-530px at
   360px wide. Icons stay, the long labels go. */
@media(max-width:680px){
  .topnav .logo-img,.navbar .logo-img{height:38px}
  .topnav .nav-right{gap:6px}
  .topnav #uEmail,.topnav .admin-badge span{display:none}
  .topnav .admin-badge{padding:5px 8px}
  .topnav .ibtn{padding:7px 9px}
  .page footer{padding:16px 18px;flex-wrap:wrap;gap:6px}
  .charts-row>*,.charts-row-2>*{min-width:0}
}