/* ─────────────────────────────────────────────────────────────
   Look and feel layer for the tenant ACME.
   This file is the only thing that changes per customer.
   The design skill will later write exactly this file, pulled
   from the customer's own website. Template and data stay put.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Brand */
  --mandant-name: "ACME";
  --tinte:      #2E2A6B;   /* Primary, indigo */
  --tinte-tief: #211E52;
  --tinte-hell: #ECEBF5;
  --tinte-rand: #C9C6E4;

  --ocker:      #B5822A;   /* Accent */
  --ocker-hell: #FBF2DF;
  --ocker-rand: #E8D5A6;

  /* Ground and type */
  --ink:      #17161F;
  --ink-2:    #55525F;
  --ink-3:    #86828F;
  --papier:   #FCFBF8;
  --grund:    #F5F2EC;
  --wash:     #EFEBE3;
  --rand:     #E1DBD0;
  --rand-fein:#EDE8DF;

  /* Meaning, not brand */
  --gut:      #2F7D5B;
  --gut-hell: #E7F2EC;
  --gut-rand: #B9DCC9;
  --warn:     #A8452F;
  --warn-hell:#FAEDE9;
  --warn-rand:#E8C6BB;

  /* Type follows the monday.com brand book.
     Figtree is named there for the platform, boards and screens, Poppins for
     marketing. The Phoenix rule stays: interface versus spoken word.
     No monospace, monday has none. Numbers run on Figtree with tabular figures. */
  --ui:     'Figtree', system-ui, -apple-system, sans-serif;
  --wort:   'Poppins', 'Figtree', system-ui, sans-serif;
  --daten:  'Figtree', system-ui, sans-serif;

  /* Four weights only, the brand book offers no more. */
  --licht:  300;
  --normal: 400;
  --halb:   600;
  --fett:   700;

  /* Casing is a token, not a property of the template.
     monday forbids all caps outright, including for emphasis.
     A tenant with a different rule sets "uppercase" and a tracking value here. */
  --label-schreibweise: none;
  --label-sperrung: 0;
  --label-groesse: .78rem;

  /* Relief. Neumorphism expressed as tokens, so a tenant can switch it on or
     off without touching the template. Colours are derived from this tenant's
     warm ground, not lifted from the reference, which was cool grey. */
  --relief-grund: #F5F2EC;
  --relief:       8px 8px 16px rgba(183, 171, 150, .5), -8px -8px 16px rgba(255, 255, 255, 1);
  --relief-innen: inset 4px 4px 8px rgba(183, 171, 150, .55), inset -4px -4px 8px rgba(255, 255, 255, 1);
  --relief-r:     22px;

  /* Shape */
  --r:       6px;
  --r-gross: 10px;
  --schale:  74rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinte:      #A9A4E8;
    --tinte-tief: #C4C0F2;
    --tinte-hell: #1D1B33;
    --tinte-rand: #38346B;

    --ocker:      #DDAE5A;
    --ocker-hell: #2A2114;
    --ocker-rand: #574321;

    --ink:      #F2F0EA;
    --ink-2:    #A9A5A0;
    --ink-3:    #79756F;
    --papier:   #16151A;
    --grund:    #100F14;
    --wash:     #1D1C22;
    --rand:     #2C2A33;
    --rand-fein:#232228;

    --relief-grund: #100F14;
    --relief:       8px 8px 16px rgba(0, 0, 0, .65), -8px -8px 16px rgba(48, 47, 58, .55);
    --relief-innen: inset 4px 4px 8px rgba(0, 0, 0, .7), inset -4px -4px 8px rgba(48, 47, 58, .5);

    --gut:      #57BA8E;
    --gut-hell: #12241C;
    --gut-rand: #275144;
    --warn:     #DE8B74;
    --warn-hell:#2A1611;
    --warn-rand:#54291E;
  }
}