/* ClassPlanr shared brand tokens
   ------------------------------------------------------------
   SOURCE OF TRUTH for brand-level choices shared by the WEBSITE
   and APP. Layout/component rules stay in their respective files.

   REBRAND WORKFLOW
   1. Add candidate values in the "Rebrand options" section below.
   2. Review them without changing the active aliases.
   3. When approved, point the ACTIVE aliases at the chosen option.
   This lets us trial new colours/fonts progressively without a
   risky all-at-once visual change.
*/

:root{
  /* ACTIVE BRAND ALIASES - current production appearance */
  --cp-ink:#24312d;
  --cp-muted:#697670;
  --cp-bg:#f7f5f1;
  --cp-card:#ffffff;
  --cp-green:#476c60;
  --cp-soft:#e8efeb;
  --cp-line:#d9dfdc;
  --cp-warning:#8a5b3d;
  --cp-pro-locked:#aebdb7;

  /* Semantic aliases used by existing website/app CSS */
  --ink:var(--cp-ink);
  --muted:var(--cp-muted);
  --bg:var(--cp-bg);
  --card:var(--cp-card);
  --accent:var(--cp-green);
  --soft:var(--cp-soft);
  --line:var(--cp-line);
  --warn:var(--cp-warning);
  --pro:var(--cp-pro-locked);
  --cream:var(--cp-bg);
  --green:var(--cp-green);

  /* Typography */
  --cp-font-sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --cp-weight-regular:400;
  --cp-weight-medium:500;
  --cp-weight-semibold:650;
  --cp-weight-bold:750;
  --cp-weight-heavy:800;

  /* Shared shape */
  --cp-radius-sm:9px;
  --cp-radius-control:11px;
  --cp-radius-button:12px;
  --cp-radius-card:18px;
  --cp-radius-marketing-card:20px;
  --cp-radius-feature:24px;
  --cp-radius-pill:999px;

  /* Shared spacing */
  --cp-space-1:4px;
  --cp-space-2:8px;
  --cp-space-3:12px;
  --cp-space-4:16px;
  --cp-space-5:20px;
  --cp-space-6:24px;
  --cp-space-8:32px;
  --cp-space-10:40px;
  --cp-space-12:48px;
  --cp-space-16:64px;

  /* Shared effects */
  --cp-shadow-soft:0 5px 22px rgba(31,50,42,.035);
  --cp-shadow-card:0 8px 26px rgba(36,49,45,.035);
  --cp-shadow-raised:0 20px 55px rgba(36,49,45,.14);
  --cp-focus:#9abfb0;

  /* Website scale */
  --cp-website-max:1360px;
  --cp-website-h1-min:43px;
  --cp-website-h1-max:70px;
  --cp-website-body-min:17px;
  --cp-website-body-max:20px;

  /* App scale */
  --cp-app-max:1280px;
  --cp-app-h1-min:30px;
  --cp-app-h1-max:45px;
  --cp-app-body:14px;

  /* ==========================================================
     REBRAND OPTIONS - SAFE SANDBOX
     Add/replace candidate values here. These DO NOT change the
     website or app until an ACTIVE alias above is pointed to them.
     ========================================================== */

  /* Candidate accent colours from the newer ClassPlanr direction.
     Values are intentionally placeholders until we approve exact
     production colours from the final logo/brand exploration. */
  --cp-option-yellow:unset;
  --cp-option-purple:unset;
  --cp-option-coral:unset;
  --cp-option-green:unset;
  --cp-option-cream:unset;
  --cp-option-ink:unset;

  /* Candidate font stacks. Add the approved font name first once
     selected; keep system fallbacks so the product remains robust. */
  --cp-option-font-display:var(--cp-font-sans);
  --cp-option-font-body:var(--cp-font-sans);
}

/* Optional preview hooks.
   Add class="cp-preview-rebrand" to a local/test page only after
   candidate values above have been filled in. Nothing changes now. */
.cp-preview-rebrand{
  --ink:var(--cp-option-ink,var(--cp-ink));
  --bg:var(--cp-option-cream,var(--cp-bg));
  --accent:var(--cp-option-green,var(--cp-green));
  --green:var(--accent);
  --cream:var(--bg);
}

/* Utility swatches for a future internal brand/style-guide page. */
.cp-brand-swatch{display:inline-block;width:2.5rem;height:2.5rem;border:1px solid var(--cp-line);border-radius:10px;vertical-align:middle}
.cp-brand-swatch-green{background:var(--cp-green)}
.cp-brand-swatch-cream{background:var(--cp-bg)}
.cp-brand-swatch-ink{background:var(--cp-ink)}
.cp-brand-swatch-muted{background:var(--cp-muted)}
.cp-brand-swatch-line{background:var(--cp-line)}