/* ============================================================
   Design tokens — all color variables for mystyle.css
   DO NOT edit hardcoded color values in mystyle.css directly;
   update this file instead.
   ============================================================ */

:root {

    /* ---- Primary / Brand ---- */
    --color-primary:              #428bca;
    --color-primary-darker:       #2277ba;
    --color-accent-purple:        #a158eb;
    --color-accent-pink:          #bf3773;
    --color-accent-magenta:       #a15be8;
    --color-forest-green:         #228b22;
    --color-highlight-red:        #eb1e1e;


    /* ---- Semantic Status ---- */
    --color-danger:               #c62828;
    --color-success:              #2e7d32;
    --color-success-dark:         #1b5e20;
    --color-warning:              #ef6c00;
    --color-warning-orange:       #ff6600;
    --color-warning-deep:         #b45309;   /* deep amber — white text on a solid warning fill (AA) */
    --color-info:                 #1565c0;
    --color-info-blue:            #0b63c5;
    --color-info-light:           #0c47a1;
    --color-info-dark:            #094a96;
    --color-link:                 #1d4ed8;

    /* ---- Text Colors ---- */
    --color-text-black:           #000000;
    --color-text-dark-1:          #111827;
    --color-text-dark-2:          #1f2937;
    --color-text-primary-dark:    #2a3f54;
    --color-text-darkest:         #222;
    --color-text-dark-menu:       #2f3a45;
    --color-text-secondary:       #333333;
    --color-text-secondary-short: #333;      /* same visual as --color-text-secondary */
    --color-text-tertiary:        #444;
    --color-text-muted:           #555;
    --color-text-gray-1:          #6b7280;
    --color-text-gray-dim:        #737373;
    --color-text-gray-2:          #777;
    --color-text-gray-3:          #888;
    --color-text-gray-5:          #959595;
    --color-text-gray-6:          #999999;
    --color-text-brown-neutral:   #5f5e5a;
    --color-text-brown-dark:      #5f5f5f;   /* near-dup of --color-text-brown-neutral */
    --color-text-amber:           #854f0b;
    --color-text-red-muted:       #a32d2d;
    --color-text-orange-dark:     #7f3e00;
    --color-text-red-dark:        #7f0000;
    --color-text-blue-dark:       #2c5a87;
    --color-text-blue-darker:     #1a3a5c;
    --color-text-blue-info:       #185fa5;
    --color-text-blue-highlight:  #2a7fff;
    --color-text-link:            #007bff;
    --color-text-icon-grey:       #4b5563;

    /* ---- Named Color Keywords (kept as separate tokens per project convention) ---- */
    --color-text-named-green:     green;
    --color-text-named-red:       red;
    --color-text-named-blue:      blue;
    --color-text-named-black:     black;
    --color-named-crimson:        crimson;
    --color-named-gray:           gray;
    --color-named-palevioletred:  palevioletred;

    /* ---- Background — Whites (three separate tokens per project convention) ---- */
    --color-bg-white:             #ffffff;
    --color-bg-off-white:         #fefefe;
    --color-bg-near-white:        #fdfdfd;

    /* ---- Background — Grays ---- */
    --color-bg-gray-1:            #f5f5f5;
    --color-bg-gray-2:            #f5f9ff;
    --color-bg-gray-3:            #f3f4f6;
    --color-bg-gray-4:            #f7f8fb;
    --color-bg-gray-5:            #f8fafc;
    --color-bg-gray-6:            #f9f9f9;
    --color-bg-gray-7:            #fafafa;
    --color-bg-tile:              #f1efe8;
    --color-bg-menu-hover:        #f4f6f8;
    --color-bg-panel-header:      #f4f4f4;
    --color-bg-row-hover:         #f7f9fc;

    /* ---- Background — Blues ---- */
    --color-bg-selection:         #e6f0ff;
    --color-bg-blue-highlight:    #eaf2ff;
    --color-bg-blue-highlight-alt:#eef2ff;   /* near-dup of --color-bg-blue-highlight */
    --color-bg-blue-active:       #eaf0fb;
    --color-bg-blue-1:            #e8f1ff;
    --color-bg-blue-2:            #e3f2fd;

    /* ---- Background — Greens / Teal / Yellow ---- */
    --color-bg-green-1:           #e7f7ef;
    --color-bg-green-2:           #e8f5e9;
    --color-bg-teal-light:        #e6fbfb;
    --color-bg-yellow-1:          #fff7df;
    --color-bg-yellow-2:          #fff8e1;
    --color-bg-toggle-gray:       #e0e0e0;

    /* ---- Background — Status Badges ---- */
    --color-bg-success-badge:     #d1fae5;
    --color-bg-danger-badge:      #fee2e2;
    --color-bg-info-badge:        #dbeafe;
    --color-bg-warning-subtle:    #fff3cd;
    --color-bg-danger-subtle:     #fff1f0;
    --color-bg-danger-menu:       #fdecec;

    /* ---- Background — Status Chips ---- */
    --color-bg-status-open:       #1976d2;
    --color-bg-status-progress:   #f57c00;
    --color-bg-status-cancelled:  #757575;
    --color-bg-purple:            #6a1a9a;
    --color-bg-priority-low:      #81c784;
    --color-bg-priority-medium:   #ffb74d;
    --color-bg-priority-high:     #e57373;
    --color-bg-priority-urgent:   #b71c1c;

    /* ---- Background — Dark / Theme Panels ---- */
    --color-bg-dark-entity:       #293545;
    --color-bg-header-dark:       #5b7183;
    --color-bg-page-dark:         #374850;
    --color-bg-button-primary:    #3c6ea8;
    --color-bg-danger-dark:       #9b2950;
    --color-bg-danger-darker:     #7e2040;
    --color-bg-button-teal: #0aa8aa;

    /* ---- Border — Buttons ---- */
    --color-border-button-outline: #d5dae5;

    /* ---- Background — Buttons ---- */
    --color-bg-button-navy: #08326f;

    /* ---- Border — Dividers ---- */
    --color-border-divider-light: #eaeef4;
    /* ---- Text — Buttons ---- */
    --color-text-button-outline:   #202020;

    /* ---- Background — Icons ---- */
    --color-bg-icon-teal:         #0f766e;
    --color-bg-icon-yellow:       #b45309;
    --color-bg-icon-grey:         #f1f3f5;


    /* ---- Border Colors ---- */
    --color-border-light:         #e5e5e5;
    --color-border-light-alt:     #e5e7eb;   /* near-dup of --color-border-light */
    --color-border-gray-1:        #dae6ec;
    --color-border-gray-2:        #d7dce6;
    --color-border-gray-3:        #d8e0e8;
    --color-border-gray-4:        #dce3ea;
    --color-border-gray-5:        #dfe5ec;
    --color-border-blue-light:    #b8d4f0;
    --color-border-dark:          #484644;
    --color-border-medium:        #909090;
    --color-border-subtle-1:      #e6e9ed;

    --color-border-subdued:       #e9edf5;
    --color-border-cool:          #d6d6d6;
    --color-border-gray-medium:   #d9d9d9;
    --color-border-blue-sidebar:  #cfd6de;
    --color-border-dark-gray:     #cfcfcf;
    --color-border-orange-warn:   #ffeeba;
    --color-border-ddd:           #ddd;
    --color-border-eee:           #eee;
    --color-border-eef0f4:        #eef0f4;
    --color-border-e8ebf1:        #e8ebf1;
    --color-border-neutral-2:     #e2e8f0;
    --color-border-neutral-3:     #e3e3e3;
    --color-border-neutral-4:     #e1e6eb;

    --color-bg-pagination-active: #0155c6;

    --color-bg-tag-pill:   #e8f0ff;
    --color-text-tag-pill: #2a4f9d;
}