/* ============================================================
   BRAND COLOR VARIABLES
   Based on CONTEG Brand Guidelines — Colour Palette & Shades

   Only the colours listed below may be used in the visual style.
   Others that are not listed are prohibited.
   ============================================================ */

:root {

    /* ── Core Palette ───────────────────────────────────────── */

    --brand-navy: #00315C;
    /* American Navy */
    --brand-sky: #CAE5FF;
    /* Pale Sky */
    --brand-midnight: #1E1E1E;
    /* Midnight Grey */
    --brand-white: #FFFFFF;
    /* White */


    /* ── American Navy — Shades ───────────────────────────── */

    --brand-navy-100: #00315C;
    /* 100% */
    --brand-navy-80: #335A7D;
    /* 80%  */
    --brand-navy-60: #66839D;
    /* 60%  */
    --brand-navy-40: #99ADBE;
    /* 40%  */
    --brand-navy-20: #CCD6DE;
    /* 20%  */


    /* ── Pale Sky — Shades ────────────────────────────────── */

    --brand-sky-100: #CAE5FF;
    /* 100% */
    --brand-sky-80: #D5EAFF;
    /* 80%  */
    --brand-sky-60: #DFEFFF;
    /* 60%  */
    --brand-sky-40: #EAF5FF;
    /* 40%  */
    --brand-sky-20: #F4FAFF;
    /* 20%  */


    /* ── Midnight Grey — Shades ───────────────────────────── */

    --brand-midnight-100: #1E1E1E;
    /* 100% */
    --brand-midnight-80: #4B4B4B;
    /* 80%  */
    --brand-midnight-60: #787878;
    /* 60%  */
    --brand-midnight-40: #A5A5A5;
    /* 40%  */
    --brand-midnight-20: #D2D2D2;
    /* 20%  */


    /* ── Opacity Variants (derived from approved palette) ── */

    --brand-navy-alpha-90: rgba(0, 49, 92, 0.9);
    --brand-navy-alpha-70: rgba(0, 49, 92, 0.7);
    --brand-navy-alpha-50: rgba(0, 49, 92, 0.5);
    --brand-navy-alpha-12: rgba(0, 49, 92, 0.12);
    --brand-sky-alpha-70: rgba(202, 229, 255, 0.7);
    --brand-sky-alpha-50: rgba(202, 229, 255, 0.5);


    /* ── Component Library Tokens (from Component Library.svg) ── */

    --card-radius: 8px;
    --card-flat-bg: rgba(25, 59, 103, 0.05);
    --card-outlined-border: rgba(28, 55, 90, 0.16);
    --card-elevated-border: rgba(26, 56, 96, 0.1);
    --card-elevated-shadow:
        0px 4px 12px rgba(0, 0, 0, 0.05),
        0px 1px 4px rgba(0, 0, 0, 0.08);
    --text-heading: #192434;
    --text-body: rgba(25, 39, 57, 0.94);


    /* ── Semantic Colors (from Button.png / Notification.png) ── */

    --color-error: #C91432;
    --color-error-hover: #A8102A;
    --color-error-bg: rgba(201, 20, 50, 0.06);
    --color-success: #1D6F42;
    --color-success-hover: #175A36;
    --color-success-bg: rgba(29, 111, 66, 0.06);
    --color-warning: #F5C518;


    /* ── Shadow Levels (from Shadows.png) ─────────────────── */

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);


    /* ── Input (from Input fields.png / Text Field.png) ───── */

    --input-bg: #F3F5F7;
    --input-bg-hover: #EBEEF1;
    --input-radius: 6px;
}

/* ── Standardized Button Radius ───────────────────────── */
.btn,
.cl-btn {
    border-radius: 4px !important;
}