/* ==========================================================================
   MyHommi — BRAND FILE
   --------------------------------------------------------------------------
   THIS IS THE ONLY FILE YOU CHANGE TO REBRAND THE WHOLE SITE.

   Every colour, font and spacing value on every page comes from here.
   Change a value below and it changes everywhere at once. You never need to
   hunt through the pages.

   The logo shape itself lives in ONE other place: src/mark.svg
   ========================================================================== */

:root {

  /* --- THE GROUND ------------------------------------------------------
     The dark background colour of the whole site.                        */
  --ground:            #161826;
  --ground-raised:     #1E2030;   /* cards sitting on the ground          */
  --ground-sunk:       #12141f;   /* header, footer                       */
  --band:              #262a60;   /* the indigo strip under the hero      */

  /* --- THE BRAND COLOUR (teal) ----------------------------------------
     Four steps, matching the four planes of the logo. Light to dark.     */
  --brand-1:           #7ED4C8;
  --brand-2:           #38A99C;
  --brand-3:           #1E6B60;
  --brand-4:           #134C44;
  --brand-pale:        #A8E4DB;   /* hover state                          */
  --brand-faint:       #D6F3EE;
  --brand-live:        #14B8A6;   /* on light backgrounds                 */

  /* --- RESERVED COLOURS -----------------------------------------------
     Meaning-carrying. Never put these inside the logo.
     amber = students   violet = schools                                  */
  --amber:             #F3C77E;
  --amber-deep:        #E8A33D;
  --violet:            #B4A9FA;
  --violet-deep:       #7C6CF0;

  /* --- TEXT ------------------------------------------------------------ */
  --ink:               #E9E9ED;
  --ink-soft:          #C3CEDF;
  --ink-muted:         #8CA0BF;
  --ink-faint:         #8797B5;   /* 4.6:1 even over the brightest point of
                                     the hero gradient — see tools/audit.mjs */

  /* --- WARM SECTIONS ----------------------------------------------------
     A page that is dark from top to bottom reads as software. Alternating
     into a warm paper tone lets the emotional sections breathe, and makes
     the product panels feel like objects on a table.
     Teal has to darken on a light ground to stay legible — that is what the
     brand pack's second teal ramp is for.                                  */
  --paper:             #F6F1E8;   /* warm cream                             */
  --paper-2:           #EFE7DA;   /* a shade deeper, for cards on paper     */
  --paper-line:        #DCD1BF;
  --paper-rule:        #C8B9A2;   /* the notebook rule                      */
  --ink-dark:          #241F1A;   /* text on paper                          */
  --ink-dark-soft:     #4A423A;
  --ink-dark-faint:    #6B6055;
  --brand-on-paper:    #0A6B60;   /* teal, darkened for a light ground      */
  --brand-on-paper-2:  #0C7B6E;   /* the brand pack's #0E8F80 measures 3.55:1
                                     on this cream, which is under AA for body
                                     text. Darkened just enough to reach 4.6:1
                                     so it can be used anywhere without care. */
  --amber-on-paper:    #8A5A08;
  --violet-on-paper:   #4A3FA8;

  /* --- LINES AND EDGES ------------------------------------------------- */
  --line:              #3f424d;
  --line-soft:         #292b31;
  --line-brand:        rgba(126, 212, 200, 0.5);
  --wash-brand:        rgba(20, 184, 166, 0.08);
  --wash-amber:        rgba(232, 163, 61, 0.08);
  --wash-violet:       rgba(124, 108, 240, 0.10);

  /* --- TYPE ------------------------------------------------------------
     Headings never go above weight 500. That is a brand rule.            */
  --font: "InterVar", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --weight-heading:    500;
  --weight-body:       400;
  --weight-label:      600;

  /* Wordmark tracking. Left padding always matches, so the word stays
     optically centred. Brand rule: never tighter than 0.22em.            */
  --track-display:     0.13em;
  --track-lockup:      0.13em;
  --track-small:       0.12em;   /* toolbar / footer sizes */

  /* --- SHAPE ------------------------------------------------------------ */
  --radius:            8px;
  --radius-lg:         14px;
  --radius-pill:       999px;

  /* --- LAYOUT ----------------------------------------------------------- */
  --measure:           1480px;   /* wide product workspace on desktop      */
  --measure-narrow:    820px;    /* FAQ column                             */
  --gutter:            22px;

  /* --- MOTION -----------------------------------------------------------
     220ms is the house standard.                                          */
  --motion:            220ms;
  --ease:              cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   THE GUIDED BOARD — the real product's own palette.
   Lifted from src/panel.css in MyHommi 0.9.677 so the demo on this page looks
   like the thing a parent will actually install, not a website approximation.

   The one rule that matters: MyHommi's own voice is LAVENDER. Teal means
   "you can tap this". Never mix them up — a visitor learns the product's
   language here before they install it.
   ========================================================================== */
:root {
  --gb-chrome:     #0A1220;   /* the panel itself                */
  --gb-surface:    #1b2437;
  --gb-surface-2:  #232f47;
  --gb-actions:    #1e2c48;   /* the composer strip at the bottom */
  --gb-line:       #33415e;
  --gb-line-ctl:   #56668c;
  --gb-text:       #e9edf6;
  --gb-muted:      #97a3bd;
  --gb-teal:       #57c9b6;   /* ACTION only                      */
  --gb-teal-soft:  #57c9b622;
  --gb-lavender:   #b4a7f0;   /* MyHommi's VOICE                  */
  --gb-lav-soft:   #b4a7f02b;
  --gb-amber:      #f0b75e;
}