/* = Alap */
:root {
    --skin-background: white;               /* Base background. */
    --skin-surface: whitesmoke;             /* Background for separable elements like panels, dialogs, etc. */
    --skin-background-elevated: #faffff;    /* Background for special or elevated content like dropdowns, popovers. */
    
    --skin-text: black;                     /* Base text color. */
    --skin-text-muted: gray;                /* Text color for less important or disabled text. (Optional: may use calculated value.) */
    
    --skin-button: color-mix(in srgb, var(--skin-background), var(--skin-text) 10%);    /* Background color for button elements. */                    
    --skin-interactable: var(--skin-primary);   /* Color for interactable (clickable) elements. The primary color used by default. */
    
    --skin-primary: #004d61;                /* Primary color for the theme. */
    --skin-on-primary: white;               /* Optional: When writing on primary colored background. */
    --skin-accent: #af0069;                 /* Accent color for the theme */
    --skin-on-accent: white;                /* Optional: When writing on accent colored background. */
    
    --skin-hover: oklch(from orange 1 c h);   /* Color for the :hover pseudo-class. Should be usable as foreground or background equally, so middle ground between text and background base. */
    --skin-highlight: mediumblue;           /* Color for when text or icon needs to be highlighted, like "current" or "selected" (but NOT hover!) needs to be in contrast with the background. */
    
    --skin-recent: #fff8b8;                 /* Color for marking recent (added since last visit) items in a list. */
    --skin-error: red;                      /* Color for indicating errors. */
    --skin-warning: yellow;                 /* Color for indicating warnings. */
    
    --skin-status-draft: lightgray;         /* Color for the leave status: Draft. */
    --skin-status-pending: #ffcc29;         /* Color for the leave status: Pending. */
    --skin-status-approved: #77dd77;        /* Color for the leave status: Approved. */
    --skin-status-rejected: #ff502f;        /* Color for the leave status: Rejected. */
    --skin-status-noreview: #4574ab;        /* Color for the leave status: Does not require revirew. */
    
    /* Generic category colors for arbitrary reasons. Intended as background so in contract with text color. */
    --skin-category1: aliceblue;
    --skin-category2: ivory;
    --skin-category3: honeydew;
    --skin-category4: snow;
    --skin-category5: mintcream;
    --skin-category6: lightcyan;
    --skin-category7: antiquewhite;
    --skin-category8: lavender;
    --skin-category9: beige;
}