:root {

    --eyect-primary:          #0C4668;

    --eyect-brand:            var(--eyect-primary);
    --eyect-brand-hover:      color-mix(in srgb, var(--eyect-primary) 85%, black);
    --eyect-brand-contrast:   #ffffff;

    --eyect-accent:           var(--eyect-primary);
    --eyect-accent-strong:    color-mix(in srgb, var(--eyect-accent) 80%, black);
    --eyect-accent-soft:      color-mix(in srgb, var(--eyect-accent) 45%, white);
    --eyect-accent-pale:      color-mix(in srgb, var(--eyect-accent) 15%, white);
    --eyect-accent-tint:      color-mix(in srgb, var(--eyect-accent) 5%,  white);

    --eyect-gradient-from:    var(--eyect-accent-strong);
    --eyect-gradient-to:      oklch(from var(--eyect-accent) calc(l + 0.22) calc(c * 1.6) h);

    --eyect-ink:              #26333d;
    --eyect-ink-strong:       #111418;
    --eyect-ink-soft:         #55606b;
    --eyect-muted:            #7d8b96;
    --eyect-muted-light:      #9aa5ae;

    --eyect-surface:          #ffffff;
    --eyect-surface-soft:     #f2f5f9;
    --eyect-surface-sunken:   #eef1f6;

    --eyect-line:             #dfe3ec;
    --eyect-line-strong:      #c9ccd6;
    --eyect-table-line:       #222222;

    --eyect-ok:               #23623a;
    --eyect-ok-soft:          color-mix(in srgb, var(--eyect-ok) 10%, white);
    --eyect-ok-line:          color-mix(in srgb, var(--eyect-ok) 35%, white);

    --eyect-warn:             #8a5a12;
    --eyect-warn-soft:        color-mix(in srgb, var(--eyect-warn) 8%,  white);
    --eyect-warn-line:        color-mix(in srgb, var(--eyect-warn) 35%, white);

    --eyect-error:            #8a1c2b;
    --eyect-error-soft:       color-mix(in srgb, var(--eyect-error) 8%,  white);
    --eyect-error-line:       color-mix(in srgb, var(--eyect-error) 30%, white);

    --eyect-radius-sm:        6px;
    --eyect-radius:           12px;
    --eyect-radius-lg:        16px;
    --eyect-radius-pill:      999px;

    --eyect-border-width:     1.5px;

    --eyect-shadow:           0 3px 14px  color-mix(in srgb, var(--eyect-brand) 8%,  transparent);
    --eyect-shadow-lg:        0 12px 40px color-mix(in srgb, var(--eyect-brand) 22%, transparent);
    --eyect-shadow-accent:    0 8px 20px  color-mix(in srgb, var(--eyect-accent-strong) 30%, transparent);

    --eyect-font:             inherit;
    --eyect-font-size:        inherit;
    --eyect-line-height:      inherit;

    --eyect-font-size-sm:     12.5px;
    --eyect-font-size-lg:     1.15rem;

    --eyect-field-bg:         var(--eyect-surface);
    --eyect-field-text:       var(--eyect-ink);
    --eyect-field-border:     var(--eyect-line);
    --eyect-field-radius:     var(--eyect-radius);
    --eyect-field-focus:      var(--eyect-accent);
    --eyect-field-focus-ring: color-mix(in srgb, var(--eyect-accent) 18%, transparent);

    --eyect-button-bg:        var(--eyect-brand);
    --eyect-button-text:      var(--eyect-brand-contrast);
    --eyect-button-hover:     var(--eyect-brand-hover);
    --eyect-button-radius:    var(--eyect-radius);

    --eyect-button-cta-text:  #ffffff;
}