/* ============================================================
   THEME VARIABLES
   Shared color palette and typography for the main app (style.css)
   and the login page (screen.css). Change a value here to reskin both.
   ============================================================ */

:root {
    /* -------------------------------------------------------
       Typography (used by style.css and screen.css)
    ------------------------------------------------------- */
    /*--brand-body-font-family: 'THSarabunNew', sans-serif;*/
    --brand-body-font-family: 'Sarabun', sans-serif;
    --brand-title-font-family: 'Kanit', serif;
    --brand-button-font-family: 'Kanit', serif;
    --brand-login-body-font-family: 'Kanit', serif;
    --brand-login-title-font-family: 'Kanit', serif;
    /*--brand-login-input-font-family: 'THSarabunNew', sans-serif;*/
    --brand-login-input-font-family: 'Sarabun', sans-serif;

    /* -------------------------------------------------------
       Main app palette (used by style.css)
    ------------------------------------------------------- */
    --brand-grey-200-color: #ececec;
    --brand-grey-300-color: #CCC;

    /* --brand-primary-color: #2c7be5;
    --brand-primary-color-rgb: 44, 123, 229;
    --brand-primary-color-emphasis: #215cac;
    --brand-primary-color-emphasis-rgb: 33, 92, 172; */

    --brand-primary-color: #113a72;
    --brand-primary-color-rgb: 17, 58, 114;
    --brand-primary-color-emphasis: #021028;
    --brand-primary-color-emphasis-rgb: 2, 16, 40;

    --brand-primary-color-lt: #eaf2fc;
    --brand-secondary-color: #748194;
    --brand-secondary-color-rgb: 116, 129, 148;
    --brand-secondary-color-emphasis: #515a68;
    --brand-secondary-color-lt: #f1f2f4;
    --brand-success-color: #00d27a;
    --brand-success-color-rgb: 0, 210, 122;
    --brand-success-color-emphasis: #009355;
    --brand-success-color-lt: #e6fbf2;
    --brand-info-color: #27bcfd;
    --brand-info-color-rgb: 39, 188, 253;
    --brand-info-color-emphasis: #1b84b1;
    --brand-info-color-lt: #e9f8ff;
    --brand-warning-color: #f5803e;
    --brand-warning-color-rgb: 245, 128, 62;
    --brand-warning-color-emphasis: #ac5a2b;
    --brand-warning-color-lt: #fef2ec;
    --brand-danger-color: #e63757;
    --brand-danger-color-rgb: 230, 55, 87;
    --brand-danger-color-emphasis: #a1273d;
    --brand-danger-color-lt: #fdebee;
    --brand-white-color: #fff;
    --brand-white-color-rgb: 255, 255, 255;
    --brand-muted-color: #999999;
    --brand-muted-color-rgb: 153, 153, 153;
    --brand-gray-color: #748194;
    --brand-gray-dark-color: #4d5969;
    --brand-gray-100-color: #f9fafd;
    --brand-gray-200-color: #edf2f9;
    --brand-gray-300-color: #d8e2ef;
    --brand-gray-400-color: #b6c1d2;
    --brand-gray-500-color: #9da9bb;
    --brand-gray-600-color: #748194;
    --brand-gray-700-color: #5e6e82;
    --brand-gray-800-color: #4d5969;
    --brand-gray-900-color: #344050;
    --brand-gray-1000-color: #232e3c;
    --brand-gray-1100-color: #0b1727;
    --brand-black-color: #1a1a1a;
    --brand-text-link-color: #ba4c32;
    --brand-text-link-color-hover: #8d341f;
    --brand-shadow-color: #978f6c;
    --brand-box-shadow-color-rgb: 31,41,55;

    /*--brand-text-body-color: #5e5e5e;*/
    /*--brand-text-body-color: #333;*/
    /* --brand-text-body-color: var(--brand-gray-900-color); */
    /*จากหน้า login*/
    --brand-text-body-color: #393939;

    --brand-text-title-color: var(--brand-gray-800-color);
    --brand-text-primary-color: var(--brand-primary-color);
    --brand-text-primary-color-emphasis: var(--brand-primary-color-emphasis);
    --brand-text-secondary-color: var(--brand-secondary-color);
    --brand-text-success-color: var(--brand-success-color);
    --brand-text-danger-color:var(--brand-danger-color);
    --brand-text-warning-color:var(--brand-warning-color);
    --brand-text-white-color: var(--brand-white-color);
    --brand-text-remark-color: var(--brand-danger-color);
    --brand-text-muted-color: var(--brand-muted-color);
    --brand-bg-grey-200-color: var(--brand-grey-200-color);
    --brand-bg-grey-100-color: var(--brand-gray-100-color);
    --brand-bg-grey-300-color:var(--brand-grey-300-color);
    --brand-bg-white-color: var(--brand-white-color);

    /* body */
    --brand-body-bg-color: var(--brand-bg-grey-200-color);
    --brand-body-color: var(--brand-text-body-color);
    --brand-body-border-color: var(--brand-gray-300-color);

    /* box */
    --brand-box-body-bg-color: var(--brand-bg-white-color);
    --brand-box-title-bg-color: var(--brand-primary-color);
    --brand-box-title-font-color: var(--brand-gray-100-color);
    --brand-box-border-color: rgba(var(--brand-box-shadow-color-rgb), 0.08);

    /* box-head */
    --brand-boxhead-bg-color: var(--brand-text-primary-color);
    --brand-boxhead-font-color: var(--brand-text-white-color);
    --brand-boxhead-border-color: var(--brand-white-color);

    /* fieldset */
    --brand-fieldset-border-color: var(--brand-grey-300-color);

    /* focus box shadow */
    --brand-focus-box-shadow:none;

    /* input */
    --brand-input-border-color: #d3cfc7;
    --brand-input-font-color: var(--brand-text-body-color);
    /*--brand-input-focus-border-color: #857b42;*/
    --brand-input-focus-border-color: var(--brand-primary-color);
    --brand-input-focus-font-color: var(--brand-input-font-color);
    --brand-input-hover-border-color: var(--brand-input-focus-border-color);
    --brand-input-bg-color: var(--brand-bg-white-color);
    --brand-input-focus-box-shadow: 0 0 0 4px rgba(var(--brand-primary-color-rgb), 0.15);
    /*--brand-input-line-height: 2;*/
    /*--brand-input-line-height: 1.65;*/
    --brand-input-line-height: 1.75;
    /* รายการ (li): ฟอนต์ไทยมีสระ/วรรณยุกต์บน-ล่าง line-height 120% ของ body ทำให้แต่ละบรรทัดชิดกัน */
    --brand-list-line-height: 1.6;
    --brand-input-placeholder-font-color: rgba(var(--brand-secondary-color-rgb),0.8);

    --brand-button-box-shadow: 0 0 0 1px rgba(43, 45, 80, 0.1), 0 2px 5px 0 rgba(43, 45, 80, 0.08), 0 1px 1.5px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.08);
    --brand-button-hover-box-shadow: 0 0 0 1px rgba(43, 45, 80, 0.1), 0 2px 5px 0 rgba(43, 45, 80, 0.1), 0 3px 9px 0 rgba(43, 45, 80, 0.08), 0 1px 1.5px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.08);

    /* button - falcon-default variant (soft/flat gray button used by jQuery UI dialog buttons) */
    --brand-button-default-bg-color: var(--brand-box-body-bg-color);
    --brand-button-default-color: var(--brand-gray-800-color);
    --brand-button-default-hover-color: #404a57;
    --brand-button-default-active-bg-color: #e6e6e6;
    --brand-button-default-active-border-color: #404a57;

    /* textarea */
    --brand-textarea-font-color: var(--brand-input-font-color);
    --brand-textarea-bg-color: var(--brand-bg-white-color);
    --brand-textarea-border-color: var(--brand-input-border-color);
    --brand-textarea-focus-border-color: var(--brand-input-focus-border-color);
    --brand-textarea-hover-border-color: var(--brand-textarea-focus-border-color);
    --brand-textarea-focus-box-shadow: var(--brand-input-focus-box-shadow);

    /* select */
    --brand-select-bg-color:var(--brand-bg-white-color);
    --brand-select-border-color: var(--brand-input-border-color);
    --brand-select-font-color: var(--brand-input-font-color);
    --brand-select-focus-border-color: var(--brand-input-focus-border-color);
    --brand-select-hover-border-color: var(--brand-select-focus-border-color);
    --brand-select-line-height: var(--brand-input-line-height);
    --brand-select-focus-box-shadow: var(--brand-input-focus-box-shadow);

    /* link URL */
    --brand-link-color: var(--brand-text-link-color);
    --brand-link-primary-color: var(--brand-text-primary-color);
    --brand-link-primary-color-hover: var(--brand-text-primary-color-emphasis);
    --brand-link-color-hover: var(--brand-text-link-color-hover);
    --brand-link-nav-color: var(--brand-text-white-color);
    --brand-link-nav-color-hover: var(--brand-warning-color);

    /* table */
    --brand-table-odd-row-bg-color:var(--brand-box-body-bg-color);
    --brand-table-row-bg-color-hover:#F5F5F5;
    --brand-table-row-bg-color: var(--brand-box-body-bg-color);
    --brand-table-row-border-color:  #e0e0e0;
    --brand-table-header-bg-color: #e8e8e8;
    --brand-table-header-font-color: var(--brand-text-title-color);
    --brand-table-header-border-color:  #d2d1cb;
    --brand-table-body-font-color: var(--brand-text-body-color);
    --brand-table-padding-y: 8px;
    --brand-table-padding-x: 10px;

    /* button */
    --brand-button-color: var(--brand-secondary-color);
    --brand-button-font-color-hover: #333;
    --brand-button-border-color: #b1a874;
    --brand-button-border-color-hover: var(--brand-input-hover-border-color);
    --brand-button-line-height: 1.4;

    /* hr */
    --brand-hr-color: var(--brand-grey-300-color);

    /* header */
    --brand-header-bg-color: var(--brand-primary-color);
    --brand-header-title-color: var(--brand-white-color);

    /* top navigation */
    --brand-top-navigation-color: var(--brand-white-color);
    --brand-top-navigation-color-hover: var(--brand-link-nav-color-hover);

    /* footer */
    --brand-footer-bg-color: var(--brand-primary-color);
    --brand-footer-color: var(--brand-white-color);

    /* btn-icon */
    --brand-btn-icon-color: var(--brand-text-link-color);
    --brand-btn-icon-color-hover: var(--brand-text-link-color-hover);

    /* form validation error (field borders, messages, required-field marker) */
    --brand-error-color: var(--brand-danger-color);

    /* form-control-plaintext */
    --brand-form-control-plaintext-color: var(--brand-text-body-color);

    /* btn-dialog */
    --brand-btn-dialog-border-color: #d3d3d3;
    --brand-btn-dialog-border-color-hover: #999999;

    /* jQuery UI dialog */
    --brand-dialog-content-color: var(--brand-text-body-color);
    --brand-dialog-title-color: var(--brand-text-title-color);
    /*--brand-dialog-title-bg-color: var(--brand-gray-100-color);*/
    --brand-dialog-title-bg-color: var(--brand-box-body-bg-color);
    --brand-dialog-body-bg-color: var(--brand-box-body-bg-color);
    --brand-dialog-footer-bg-color: var(--brand-box-body-bg-color);
    /*--brand-dialog-footer-bg-color: var(--brand-gray-100-color);*/

    /* msg (legacy alert widget) — backgrounds now derive from the semantic -lt tints; border/text stay their own dedicated values */
    --brand-msg-ok-bg-color: var(--brand-success-color-lt);
    --brand-msg-ok-border-color: #dbd6a2;
    --brand-msg-ok-color: #5e5c40;
    --brand-msg-error-bg-color: var(--brand-danger-color-lt);
    --brand-msg-error-border-color: #e8b084;
    --brand-msg-error-color: #e63757;
    --brand-msg-warning-bg-color: var(--brand-warning-color-lt);
    --brand-msg-warning-border-color: #f5803e;
    --brand-msg-warning-color: #5e5c40;

    /* Message (flat alert widget) — backgrounds now derive from the semantic -lt tints; border/text stay their own dedicated values */
    --brand-message-info-bg-color: var(--brand-info-color-lt);
    --brand-message-info-border-color: #77BACE;
    --brand-message-info-color: #082B33;
    --brand-message-success-bg-color: var(--brand-success-color-lt);
    --brand-message-success-border-color: #79C20D;
    --brand-message-success-color: #32510F;
    --brand-message-error-bg-color: var(--brand-danger-color-lt);
    --brand-message-error-border-color: #e63757;
    --brand-message-error-color: #7B040F;
    --brand-message-warning-bg-color: var(--brand-warning-color-lt);
    --brand-message-warning-border-color: #C7A20D;
    --brand-message-warning-color: #796616;

    /* -------------------------------------------------------
       Login page palette (used by screen.css)
    ------------------------------------------------------- */
    /*--brand-login-body-bg-color: #2770d3;*/
    --brand-login-body-bg-color: var(--brand-primary-color);
    --brand-login-box-font-color: #161616;
    --brand-login-input-font-color: var(--brand-white-color);
    --brand-login-info-font-color: var(--brand-white-color);
    --brand-login-text-color-hover: var(--brand-login-input-font-color);
    --brand-login-error-font-color: #ffc2c2; /* สว่างพอให้อ่านชัดบนพื้นเทาเข้มของกล่อง login (red เดิมตัดกันน้อย) */
    --brand-login-warning-font-color: var(--brand-warning-color); /* was a hardcoded duplicate of --brand-warning-color (#f5803e); now aliased so both derive from one value */


    /* -------------------------------------------------------
       Border Radius
    ------------------------------------------------------- */
    --brand-border-radius-xxl: 12px;
    --brand-border-radius-xl: 8px;
    --brand-border-radius-lg: 6px;
    --brand-border-radius-md: 4px;
    --brand-border-radius-sm: 2px;
    --brand-border-radius-none: 0px;

    --brand-input-border-radius: var(--brand-border-radius-md);
    --brand-select-border-radius: var(--brand-border-radius-md);
    --brand-textarea-border-radius: var(--brand-border-radius-md);

    /* -------------------------------------------------------
       Font Size
    ------------------------------------------------------- */
    /*--brand-font-size-base: 0.9375rem;*/
    /*--brand-font-size-sm: 0.8125rem;*/
    /*--brand-font-size-lg: 1.0625rem;*/

    --brand-font-size-sm: 0.75rem;
    --brand-font-size-base: 0.875rem;
    --brand-font-size-lg: 0.9375rem;

    /* -------------------------------------------------------
       Font Weight
    ------------------------------------------------------- */
    --brand-body-font-weight-light: 300;
    --brand-body-font-weight-normal: 400;
    --brand-body-font-weight-bold: 500;

    --brand-title-font-weight-light: 300;
    --brand-title-font-weight-normal: 400;
    --brand-title-font-weight-bold: 500;
}