/* =================================================================
   The project's palette and faces.
   =================================================================

   This is the one file a new project rewrites. Both sides of the CMS
   read it: the public theme in main.css / site.css, and the backoffice
   in admin.css. Change a value here and the site and the backoffice
   move together, which is the point — an editor should not feel they
   left the brand behind when they signed in.

   Nothing else should hold a colour. A rule that hard-codes one is a
   rule the next project has to find and fix.

   Loaded before every other stylesheet, by:
     views/layouts/public.php   (the site)
     views/layouts/admin.php    (the backoffice)
     views/layouts/preview.php  (a block on its own, for the picker)
   ================================================================= */

:root{
  /* ---- Brand ---- */
  --brand-blue:#00628F;     /* logo background */
  --brand-yellow:#f5f2a6;   /* logo mark — the highlight colour */
  --brand-yellow-soft:#f9f2a9;  /* o mesmo amarelo um tom acima: fundos amplos
                                   e texto sobre o cinza, onde o do logo fica
                                   demasiado saturado */
  --ocean:#0d5c63;          /* accent / links */
  --ocean-dark:#083b40;
  --ink:#1b2426;            /* body text */
  --muted:#6b7a7c;
  --sand:#f4f1ea;           /* light section bg */
  --white:#ffffff;
  --overlay:rgba(8,32,36,.45);
  --grey:#4a4a49;           /* cinza da marca — botões sólidos e footer */
  --grey-dark:#3f3f3e;      /* hover dos botões — tem de ficar mais escuro que --grey */

  /* ---- Type ---- */
  --display:"Unbounded", "Helvetica Neue", Arial, sans-serif;  /* títulos + highlights — Medium 500 */
  --body:"Urbanist", "Helvetica Neue", Arial, sans-serif;      /* texto — SemiBold 600 */

  /* ---- Measure ---- */
  --maxw:1200px;
  --gutter:clamp(20px,5vw,60px);

  /* ---- What the backoffice takes from the above ----
     Named by role rather than by colour, so a project whose brand is
     blue on white does not end up with a variable called "grey" holding
     blue. A project that wants a backoffice unlike its site overrides
     just these six. */
  --admin-chrome:      var(--grey);        /* sidebar, solid buttons */
  --admin-chrome-dark: var(--grey-dark);   /* their hover */
  --admin-highlight:   var(--brand-yellow);/* the selected item */
  --admin-canvas:      var(--sand);        /* behind the cards */
  --admin-ink:         var(--ink);
  --admin-muted:       var(--muted);
}