/*----------------------------------------------------------------------
 * Design tokens of the DAKU frontend
 *
 * Also loaded by the Lagerverkauf (WordPress) – see plugin daku-sync-header-footer.
 * Naming: --kategorie--variante, see docs/accessibility/decisions.md (E18)
 *
 * 1. Base colors  – what the color is
 * 2. Role colors  – what the color is used for, components should only use roles
 * 3. Typography
 * 4. Spacing
 * 5. Focus
 * 6. Aliases of the old variable names (to be removed step by step)
 *
 * All rem values are based on the root font size of 14px (html { font-size: 87.5% }).
 *
 * Breakpoints (custom properties are not possible in @media, write the numbers):
 *   sm >= 576px | md >= 768px | lg >= 992px | xl >= 1200px
 *   max-width: 575px | 767px | 991px | 1199px
----------------------------------------------------------------------*/

:root {
    /* 1. Base colors
    ------------------------------------------------------------------*/
    /* Teal (primary) */
    --color--teal:           #007166;
    --color--teal-dark:      #005351;
    --color--teal-darker:    #003530;
    --color--teal-darkest:   #00211e;
    --color--teal-muted:     #337574;
    --color--teal-tint:      #eff7f7;
    --color--teal-cd:        #003b34;   /* green of the corporate design */

    /* Green (accent) */
    --color--green:          #8cc53f;
    --color--green-bright:   #00cc00;

    /* Orange (call to action) */
    --color--orange:         #f8981d;
    --color--orange-light:   #f8b049;
    --color--orange-lighter: #f8ca4c;
    --color--orange-dark:    #ef6e00;
    --color--orange-border:  #c66d1c;

    /* Gray (dark to light) */
    --color--gray-900:       #212529;
    --color--gray-800:       #31353b;
    --color--gray-700:       #4d4d4d;
    --color--gray-650:       #5a5a5a;
    --color--gray-cd:        #68676c;   /* gray of the corporate design */
    --color--gray-600:       #6f7072;
    --color--slate:          #6c757d;
    --color--gray-400:       #aaaaaa;
    --color--gray-350:       #bbbbbb;
    --color--gray-300:       #cdcdcd;
    --color--gray-250:       #dedede;
    --color--gray-200:       #eaeaea;
    --color--gray-150:       #eeeeee;
    --color--gray-100:       #f5f5f5;
    --color--gray-50:        #fafbfc;
    --color--white:          #ffffff;
    --color--black:          #000000;

    /* Signal and others */
    --color--red:            #e2074a;
    --color--red-dark:       #cc0000;
    --color--red-bright:     #ff0000;
    --color--yellow:         #ffc107;
    --color--brown:          #5c4c33;
    --color--navy:           #2c3e50;
    --color--navy-dark:      #1a252f;

    /* 2. Role colors
    ------------------------------------------------------------------*/
    --color--text:           var(--color--gray-cd);
    --color--text-strong:    var(--color--gray-800);
    --color--link:           var(--color--teal);
    --color--link-hover:     var(--color--teal-darker);

    --color--bg-page:        var(--color--gray-200);
    --color--bg-surface:     var(--color--white);
    --color--bg-input:       var(--color--gray-50);

    --color--border-input:   var(--color--slate);
    --color--border-control: #cccccc;

    --color--primary:        var(--color--teal);
    --color--on-primary:     var(--color--white);
    --color--cta:            var(--color--orange);
    --color--on-cta:         var(--color--white);   /* 2.21:1 – fails WCAG, see docs/accessibility/variables-draft.md */
    --color--accent:         var(--color--green);
    --color--on-accent:      var(--color--white);   /* 2.06:1 – fails WCAG, see docs/accessibility/variables-draft.md */

    --color--error:          var(--color--red);

    --color--focus:          var(--color--teal);
    --color--focus-contrast: var(--color--white);

    /* 3. Typography
    ------------------------------------------------------------------*/
    --font-family--base:     'Open Sans', sans-serif;

    --font-size--root:       87.5%;       /* 14px at the browser default of 16px */
    --font-size--2xs:        0.785715rem;   /* 11px */
    --font-size--xs:         0.857143rem;   /* 12px */
    --font-size--sm:         0.928572rem;   /* 13px */
    --font-size--base:       1rem;          /* 14px */
    --font-size--md:         1.142858rem;   /* 16px */
    --font-size--lg:         1.285715rem;   /* 18px */
    --font-size--xl:         1.571429rem;   /* 22px */
    --font-size--2xl:        1.714286rem;   /* 24px */
    --font-size--3xl:        1.857143rem;   /* 26px */
    --font-size--4xl:        2.571429rem;   /* 36px */

    --line-height--base:     1.642858rem;   /* 23px */
    --line-height--tight:    1.2;

    /* 4. Spacing
    ------------------------------------------------------------------*/
    --space--xs:             0.357143rem;   /*  5px */
    --space--sm:             0.714286rem;   /* 10px */
    --space--md:             1.071429rem;   /* 15px */
    --space--lg:             1.428572rem;   /* 20px */
    --space--xl:             2.142858rem;   /* 30px */
    --section-padding:       3.571em;

    /* 5. Focus
    ------------------------------------------------------------------*/
    --focus--width:          3px;
    --focus--offset:         2px;

    /* 6. Aliases of the old variable names – also used by the Lagerverkauf theme
    ------------------------------------------------------------------*/
    --color-primary:         var(--color--primary);
    --color-primary-hover:   var(--color--link-hover);
    --color-primary-focus:   var(--color--teal-darkest);
    --color-red:             var(--color--red);
    --gray:                  var(--color--slate);
}