/* tokens.css - Design tokens (CSS custom properties). Only :root blocks, no rules. Loaded first of the Frantz stylesheets. */

:root {
    --height-top-bar: 4.7rem;
    --width-left-menu-min: 60px;
    --width-left-menu-max: 268px;
    --width-page-max: 1920px;
    --bs-body-font-size: 0.875rem;
    --color-background-light: #40728c1f;
    --color-primary-main: #0C3F59;
    --color-primary-main-light: #1e5875;
    --color-primary-main-lighten: #187FB3;
    --color-primary-main-darken: #000000;
    --color-primary-main-greyscale: #323232;
    --color-primary-main-saturate: #024263;
    --color-primary-main-desaturate: #163C4F;
    --color-primary-main-brighten: #3F728C;
    --color-primary-main-support: #F6A321;
    --color-primary-main-support-lighten: #FACC83;
    --color-primary-main-support-darken: #AA6A07;
    --color-primary-main-support-greyscale: #8B8B8B;
    --color-primary-main-support-saturate: #FFA518;
    --color-primary-main-support-desaturate: #DF9E38;
    --color-primary-main-support-brighten: #FFD654;
    --color-primary-support: #EC624D;
    --color-primary-support-lighten: #F6B3A9;
    --color-primary-support-darken: #BF2B14;
    --color-primary-support-greyscale: #C5C5C5;
    --color-primary-support-saturate: #FF543A;
    --color-primary-support-desaturate: #D87061;
    --color-primary-support-brighten: #FF9580;
    --color-some-1: #AFBBCD;
    --color-some-2: #F6A321;
    --color-some-3: #0C3F59;
    --color-some-insta-1: #8378B5;
    --color-some-insta-alt: #EC624D;
    --color-some-insta-2: #F6A321;
    --color-some-insta-3: linear-gradient(180deg, rgba(246,163,33,1) 0%, rgba(236,98,77,1) 50%, rgba(131,120,181,1) 100%);
    --color-rapporter-1: #EC624D;
    --color-rapporter-2: #F6A321;
    --color-rapporter-3: #8378B5;
    --color-rapporter-4: #4CB79A;
    --color-rapporter-5: #0C3F59;
    --color-rapporter-6: #333333;
    --color-rapporter-1-80: #91200F;
    --color-rapporter-1-70: #BF2B14;
    --color-rapporter-1-60: #E7391F;
    --color-rapporter-1-50: #F18B7B;
    --color-rapporter-1-40: #F6B3A9;
    --color-rapporter-1-30: #FBDCD7;
    --color-rapporter-1-20: #ffeeeb;
    --color-rapporter-2-80: #794C05;
    --color-rapporter-2-70: #AA6A07;
    --color-rapporter-2-60: #DB8909;
    --color-rapporter-2-50: #F8B752;
    --color-rapporter-2-40: #FACC83;
    --color-rapporter-2-30: #FCE0B4;
    --color-rapporter-2-20: #FEF4E5;
    --color-rapporter-3-80: #3C3460;
    --color-rapporter-3-70: #514681;
    --color-rapporter-3-60: #6659A1;
    --color-rapporter-3-50: #A199C7;
    --color-rapporter-3-40: #BFBAD9;
    --color-rapporter-3-30: #DEDBEB;
    --color-rapporter-3-20: #f3f1fb;
    --color-rapporter-4-80: #1E4C3F;
    --color-rapporter-4-70: #2D705E;
    --color-rapporter-4-60: #3C947C;
    --color-rapporter-4-50: #70C6AF;
    --color-rapporter-4-40: #95D4C3;
    --color-rapporter-4-30: #B9E3D8;
    --color-rapporter-4-20: #DDF2EC;
    --color-rapporter-5-80: #255872;
    --color-rapporter-5-70: #3F728C;
    --color-rapporter-5-60: #588BA5;
    --color-rapporter-5-50: #72A5BF;
    --color-rapporter-5-40: #8BBED8;
    --color-rapporter-5-30: #BADFF1;
    --color-rapporter-5-20: #DDF1F7;
    --color-rapporter-6-80: #4C4C4C;
    --color-rapporter-6-70: #666666;
    --color-rapporter-6-60: #7F7F7F;
    --color-rapporter-6-50: #999999;
    --color-rapporter-6-40: #B2B2B2;
    --color-rapporter-6-30: #CCCCCC;
    --color-rapporter-6-20: #E5E5E5;
    --color-success: #10B981;
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-inactive: #808080;
    /* Products */
    --color-products-customer: #cf4a7f;
    --color-products-customer-rgb: rgb(207,74,127);
    --color-products-list-customer: #fdf3fa;
    --color-products-general: #0fb8bb;
    --color-products-general-rgb: rgb(15,184,187);
    --color-products-list-general: #eafdfd;
    --color-products-media: #3d4ead;
    --color-products-media-rgb: rgb(61,78,173);
    --color-products-list-media: #eaf0fd;
    /* Campaigns */
    --color-campaigns-draft: #FFFFFF;
    --color-campaigns-draft-inverse: #000000;
    --color-campaigns-setup: #F6A321;
    --color-campaigns-setup-rgb: rgb(246,163,33);
    --color-campaigns-active: #4Cb79A;
    --color-campaigns-active-rgb: rgb(76,183,154);
    --color-campaigns-paused: #187FB3;
    --color-campaigns-paused-rgb: rgb(24,127,179);
    --color-campaigns-ended: #8B8B8B;
    --color-campaigns-ended-rgb: rgb(139,139,139);
    --color-campaigns-list-header: #ffffff;
    --color-campaigns-list-draft: #ffffff;
    --color-campaigns-list-setup: #fef6e8;
    --color-campaigns-list-active: #e4f4f0;
    --color-campaigns-list-paused: #f3f8fb;
    --color-campaigns-list-ended: #f3f3f3;
    --color-notifications-normal: var(--color-primary-main-lighten);
    --color-notifications-critical: var(--color-primary-main-support);
    --color-notifications-urgent: var(--color-primary-support-darken);
    --campaigns-border-width: 2px;
    --campaigns-border-style: solid;
    --campaigns-border-color: var(--color-black);
    --campaigns-frame-width: 1px;
    --campaigns-frame-style: solid;
    --campaigns-frame-color: var(--color-black);
    --campaigns-row-highlight: #c9e8f8; /* --color-primary-main-lighten with 20% transparency*/

    /* Slate scale - the de facto UI grays used across the app (borders,
       surfaces, muted text). Same values as the Tailwind slate palette. */
    --color-slate-50: #f8fafc;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-300: #cbd5e1;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1e293b;
    --color-slate-900: #0f172a;

    --shadow-strength: 1%;
    --shadow-color: 220 3% 15%;
    --shadow: 0.3em 0.3em 1em rgb(0 70 70 / 12%);
    /*--shadow: 0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 3px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 12px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 22px 18px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 41px 33px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%)),0 100px 80px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));*/
    /*    --shadow: -webkit-box-shadow: 10px 10px 32px -2px rgba(0,0,0,0.16);
    -moz-box-shadow: 10px 10px 32px -2px rgba(0,0,0,0.16);
    box-shadow: 10px 10px 32px -2px rgba(0,0,0,0.16);*/

    /* =========================================================================
       Telerik (Kendo) brand color overrides
       Base theme: _content/Telerik.UI.for.Blazor/css/kendo-theme-default/default-ocean-blue.css
       Maps the Frantz rapporter color scales onto Kendo CSS custom properties so
       that all Telerik components automatically use the Frantz brand palette.
       No Theme Builder license required — update these vars whenever brand changes.
       ========================================================================= */

    /* --- Primary: Frantz teal #3F728C (rapporter-5 scale) --- */
    --kendo-color-primary-subtle:        var(--color-rapporter-5-20);        /* #DDF1F7 */
    --kendo-color-primary-subtle-hover:  var(--color-rapporter-5-30);        /* #BADFF1 */
    --kendo-color-primary-subtle-active: var(--color-rapporter-5-40);        /* #8BBED8 */
    --kendo-color-primary:               var(--color-primary-main-brighten); /* #3F728C */
    --kendo-color-primary-hover:         var(--color-rapporter-5-80);        /* #255872 */
    --kendo-color-primary-active:        var(--color-primary-main);          /* #0C3F59 */
    --kendo-color-primary-emphasis:      var(--color-rapporter-5-60);        /* #588BA5 */
    --kendo-color-primary-on-subtle:     var(--color-primary-main);          /* #0C3F59 */
    --kendo-color-primary-on-surface:    var(--color-primary-main-light);    /* #1E5875 */
    --kendo-color-on-primary:            #ffffff;

    /* --- Error / Danger: Frantz red #EC624D (rapporter-1 scale) --- */
    --kendo-color-error-subtle:          var(--color-rapporter-1-20);        /* #ffeeeb */
    --kendo-color-error-subtle-hover:    var(--color-rapporter-1-30);        /* #FBDCD7 */
    --kendo-color-error-subtle-active:   var(--color-rapporter-1-40);        /* #F6B3A9 */
    --kendo-color-error:                 var(--color-primary-support);       /* #EC624D */
    --kendo-color-error-hover:           var(--color-rapporter-1-60);        /* #E7391F */
    --kendo-color-error-active:          var(--color-rapporter-1-70);        /* #BF2B14 */
    --kendo-color-error-emphasis:        var(--color-rapporter-1-50);        /* #F18B7B */
    --kendo-color-error-on-subtle:       var(--color-rapporter-1-80);        /* #91200F */
    --kendo-color-error-on-surface:      var(--color-rapporter-1-70);        /* #BF2B14 */
    --kendo-color-on-error:              #ffffff;

    /* --- Warning: Frantz orange #F6A321 (rapporter-2 scale) --- */
    --kendo-color-warning-subtle:        var(--color-rapporter-2-20);        /* #FEF4E5 */
    --kendo-color-warning-subtle-hover:  var(--color-rapporter-2-30);        /* #FCE0B4 */
    --kendo-color-warning-subtle-active: var(--color-rapporter-2-40);        /* #FACC83 */
    --kendo-color-warning:               var(--color-primary-main-support);  /* #F6A321 */
    --kendo-color-warning-hover:         var(--color-rapporter-2-60);        /* #DB8909 */
    --kendo-color-warning-active:        var(--color-rapporter-2-70);        /* #AA6A07 */
    --kendo-color-warning-emphasis:      var(--color-rapporter-2-50);        /* #F8B752 */
    --kendo-color-warning-on-subtle:     var(--color-rapporter-2-80);        /* #794C05 */
    --kendo-color-warning-on-surface:    var(--color-rapporter-2-70);        /* #AA6A07 */
    --kendo-color-on-warning:            #ffffff;

    /* --- Success: Frantz teal-green #4CB79A (rapporter-4 scale) --- */
    --kendo-color-success-subtle:        var(--color-rapporter-4-20);        /* #DDF2EC */
    --kendo-color-success-subtle-hover:  var(--color-rapporter-4-30);        /* #B9E3D8 */
    --kendo-color-success-subtle-active: var(--color-rapporter-4-40);        /* #95D4C3 */
    --kendo-color-success:               var(--color-rapporter-4);           /* #4CB79A */
    --kendo-color-success-hover:         var(--color-rapporter-4-60);        /* #3C947C */
    --kendo-color-success-active:        var(--color-rapporter-4-70);        /* #2D705E */
    --kendo-color-success-emphasis:      var(--color-rapporter-4-50);        /* #70C6AF */
    --kendo-color-success-on-subtle:     var(--color-rapporter-4-80);        /* #1E4C3F */
    --kendo-color-success-on-surface:    var(--color-rapporter-4-70);        /* #2D705E */
    --kendo-color-on-success:            #ffffff;

    /* --- Info: Frantz bright blue #187FB3 --- */
    --kendo-color-info-subtle:           #cce6f3;
    --kendo-color-info-subtle-hover:     #99cde7;
    --kendo-color-info-subtle-active:    #66b4db;
    --kendo-color-info:                  var(--color-primary-main-lighten);  /* #187FB3 */
    --kendo-color-info-hover:            #146e9c;
    --kendo-color-info-active:           #115e87;
    --kendo-color-info-emphasis:         #3a9dcc;
    --kendo-color-info-on-subtle:        #073550;
    --kendo-color-info-on-surface:       #0e5580;
    --kendo-color-on-info:               #ffffff;
}