/* ==========================================================================
   ELITE SPORT — DESIGN TOKENS
   Nguon su that duy nhat cho mau, chu, khoang cach, bo goc, chuyen dong.
   Khong component nao duoc go cung mot gia tri ma o day da co token.

   Nap TRUOC elite.css. Xem app/static/css/fonts.css cho @font-face (file sinh
   ra tu scripts/fetch_fonts.py).
   ========================================================================== */

:root {
    /* Bao cho trinh duyet biet nen dung bang mau nao cho thanh cuon, o chon
       ngay/gio va cac widget he thong khac. Thieu dong nay thi o dark mode
       thanh cuon van trang bech. */
    color-scheme: light;

    /* --- Mau: LIGHT ------------------------------------------------------
       Dinh nghia DAY DU tren :root tran. Khoi dark chi GHI DE, khong bao gio
       dinh nghia lan dau mot mau o trong @media — lam vay thi che do "light
       thu cong tren may dang de dark" se mat mau. */
    --es-canvas:       #F1F5FC;
    --es-surface:      #FDFDFE;
    /* O san la CHAT LIEU nhan dien cua he thong, khong phai mot sac do nhe.
       #E6E9ED cu chi cach canvas 1.10:1 — mot buoc mau khong ai doc ra, nen
       "san pham dat tren o mau phang" khong con la o nao ca. #DDE2E8 dua len
       1.18:1: van la o mau phang khong vien, nhung DOC RA duoc la mot o.
       Tran tren: --es-ink-3 dat tren o san phai giu >= 4.5 (o day 4.65) vi o
       nhap bi khoa va nhan "Chua co anh" nam trong o san. */
    --es-pitch:        #DDE2E8;
    --es-pitch-hover:  #D3D9E2;
    --es-ink:          #11264A;
    --es-ink-2:        #454B57;
    /* Chu phu phai dat AA ca tren pitch-hover, khong chi tren nen trang. */
    --es-ink-3:        #4D5A70;
    /* WCAG 1.4.11 doi 3:1 cho duong vien MANG NGHIA (o nhap, nut). #DCE0E6 cu
       chi dat 1.20:1 tren canvas, tuc la o nhap khong con duong bao nao. Tach
       lam hai bac: --es-line cho ke phan nhom (bang, panel), --es-line-strong
       cho vien cua thu nguoi dung thao tac duoc. */
    --es-line:         #C8CFD9;
    --es-line-strong:  #68778C;
    /* #C0442F chi dat 4.20 tren o san moi. #B23A26 dat 4.57. */
    --es-alert:        #B23A26;

    /* --- Mau semantic ---------------------------------------------------
       Moi cap gom mau chu + be mat cua CHINH no. Cac cap ben duoi deu dat
       >= 4.5:1 khi chu semantic nam tren semantic-soft; test tu dong khoa
       lai phep do nay o ca hai theme. */
    --es-success:      #1F6B4F;
    --es-success-soft: #E3F4EC;
    --es-warning:      #8A4B00;
    --es-warning-soft: #FFF1D6;
    --es-info:         #1E5C8A;
    --es-info-soft:    #E4F1FA;
    --es-danger:       #B23A26;
    --es-danger-soft:  #FBE9E5;

    /* Mau chien dich chi danh cho banner/promo co dien tich ro rang. Khong
       dung thay cho status, focus hay CTA volt. Moi cap dat >= 4.5:1. */
    --es-campaign-blue:      #174FC4;
    --es-on-campaign-blue:   #FFFFFF;
    --es-campaign-coral:     #AC491B;
    --es-on-campaign-coral:  #FFFFFF;
    --es-campaign-teal:      #146449;
    --es-on-campaign-teal:   #FFFFFF;
    --es-hero-bg:            #105F54;
    --es-hero-fg:            #FFFFFF;
    --es-card-sky:           #E8F3F8;
    --es-card-mint:          #E9F3EC;
    --es-card-sand:          #F7F0E4;
    --es-scene-opacity:      .34;

    /* Hanh dong cobalt tach khoi mau chu: khong nhuom ca van ban/thong bao.
       Volt van la CTA cap mot; cobalt danh cho nut cap hai va trang thai focus. */
    --es-action:            #174FC4;
    --es-action-hover:      #123C96;
    --es-on-action:         #FFFFFF;
    --es-action-soft:       #E7EFFF;

    --es-skeleton-base:      #DDE2E8;
    --es-skeleton-highlight: #F2F4F6;

    --es-shadow-1: 0 2px 6px -2px rgba(21, 24, 30, .10);
    --es-shadow-2: 0 14px 30px -16px rgba(21, 24, 30, .20);

    /* --- Accent: KHONG doi giua hai theme --------------------------------
       LUAT VOLT, khong co ngoai le: volt chi to len thu nguoi dung BAM DUOC
       hoac thu DANG DUOC CHON. Khong dung cho badge giam gia, khong dung cho
       wordmark, khong dung cho vach trang tri. Rai bay cho thi no thoi khong
       con la tin hieu. */
    --es-volt:         #D4F23B;
    --es-volt-press:   #BADB24;
    --es-on-volt:      #15181E;

    /* Vong focus cobalt tren nen sang, volt tren nen toi. Do lai tren moi
       be mat: quang mo chi trang tri, khong thay the vong vien ro rang. */
    --es-focus:        #174FC4;
    --es-focus-glow:   rgba(23, 79, 196, .20);

    /* Khoi navy dung chung cho header/footer/admin, nang sang o dark mode. */
    --es-brand-bg:     #102A56;
    --es-brand-fg:     #F2F4F6;
    --es-brand-fg-2:   #B9CBE5;
    --es-brand-line:   rgba(242, 244, 246, .16);
    --es-brand-hover:  rgba(242, 244, 246, .10);

    /* --- Chu ------------------------------------------------------------- */
    --es-font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
    --es-font-body:    "Geist", "Segoe UI", system-ui, sans-serif;
    --es-font-mono:    "Geist Mono", ui-monospace, "Cascadia Mono", monospace;

    /* Type scale dung chung. Body 17px tren desktop de doc ro khi demo tu
       xa; breakpoint mobile ha ve 16px o elite.css, khong bao gio thap hon
       mac dinh trinh duyet. */
    --es-text-xs:   .8125rem;
    --es-text-sm:   .9375rem;
    --es-text-md:   1.0625rem;
    --es-text-lg:   1.25rem;
    --es-text-xl:   1.5rem;
    --es-text-2xl:  2rem;

    --es-leading-tight:  1.18;
    --es-leading-body:   1.6;
    --es-leading-loose:  1.72;

    /* --- Khoang cach ----------------------------------------------------- */
    --es-1: 4px;   --es-2: 8px;   --es-3: 12px;  --es-4: 16px;  --es-5: 24px;
    --es-6: 32px;  --es-7: 48px;  --es-8: 64px;  --es-9: 96px;

    --es-container: 1280px;
    --es-footer-container: 1120px;
    --es-gutter:  clamp(16px, 4vw, 32px);
    --es-section: clamp(56px, 7vw, 96px);
    --es-control-height: 48px;
    --es-card-padding: clamp(20px, 2.5vw, 32px);

    /* --- Bo goc: 4 bac. Luat dong tam: vat chua lon hon vat ben trong it
           nhat mot bac. Khong bao gio dat radius bang nhau o hai lop long. -- */
    --es-r-sm:   8px;
    --es-r-md:   12px;
    --es-r-lg:   20px;
    --es-r-pill: 999px;

    /* --- Chuyen dong ----------------------------------------------------- */
    --es-ease:     cubic-bezier(.16, 1, .3, 1);
    --es-t-fast:   120ms;
    --es-t-base:   200ms;
    --es-t-slow:   320ms;
    --es-t-reveal: 520ms;

    /* --- Z-index: thang 5 bac. Khong bao gio go z-index: 9999. ----------- */
    --es-z-base:    1;
    --es-z-sticky:  100;
    --es-z-nav:     200;
    --es-z-overlay: 1040;
    --es-z-modal:   1055;
}

/* Khoi mau toi. Chi ghi de mau; font, spacing, radius, motion, z-index va
   volt deu KHONG doi. Volt giu nguyen de mau thuong hieu van nhan ra duoc o
   ca hai che do. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --es-canvas:      #0B1424;
    --es-surface:     #111E33;
    --es-pitch:       #1D2C43;
    --es-pitch-hover: #263752;
    --es-ink:         #F2F4F6;
    --es-ink-2:       #B7BDC8;
    --es-ink-3:       #A2AEC2;
    --es-line:        #39404E;
    --es-line-strong: #8295B0;
    --es-alert:       #F0765F;

    --es-success:      #74D3A7;
    --es-success-soft: #12372B;
    --es-warning:      #F5C267;
    --es-warning-soft: #3B2A0F;
    --es-info:         #73B7F0;
    --es-info-soft:    #152D43;
    --es-danger:       #F0765F;
    --es-danger-soft:  #3B1D19;

    --es-campaign-blue:      #6EA3FF;
    --es-on-campaign-blue:   #0E1014;
    --es-campaign-coral:     #FFAD7A;
    --es-on-campaign-coral:  #0E1014;
    --es-campaign-teal:      #70D3A8;
    --es-on-campaign-teal:   #0E1014;
    --es-hero-bg:            #123D3B;
    --es-hero-fg:            #F7FAF8;
    --es-card-sky:           #20354C;
    --es-card-mint:          #1B3939;
    --es-card-sand:          #3A3030;
    --es-scene-opacity:      .12;

    --es-action:            #9DBFFF;
    --es-action-hover:      #BED4FF;
    --es-on-action:         #102344;
    --es-action-soft:       #1D3559;

    --es-skeleton-base:      #20252E;
    --es-skeleton-highlight: #39404E;

    /* Navy sang hon canvas de khung dieu huong khong chim vao nen toi. */
    --es-brand-bg:    #19365B;

    /* Volt tuong phan ro tren cac be mat toi. */
    --es-focus:       #D4F23B;
    --es-focus-glow:  rgba(212, 242, 59, .22);

    --es-shadow-1: 0 2px 6px -2px rgba(0, 0, 0, .45);
    --es-shadow-2: 0 14px 30px -16px rgba(0, 0, 0, .60);
}

/* Nguoi dung de he thong quyet dinh (chua bam nut doi theme bao gio).
   `:not([data-theme="light"])` de lua chon thu cong luon thang. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --es-canvas:      #0B1424;
        --es-surface:     #111E33;
        --es-pitch:       #1D2C43;
        --es-pitch-hover: #263752;
        --es-ink:         #F2F4F6;
        --es-ink-2:       #B7BDC8;
        --es-ink-3:       #A2AEC2;
        --es-line:        #39404E;
        --es-line-strong: #8295B0;
        --es-alert:       #F0765F;

        --es-success:      #74D3A7;
        --es-success-soft: #12372B;
        --es-warning:      #F5C267;
        --es-warning-soft: #3B2A0F;
        --es-info:         #73B7F0;
        --es-info-soft:    #152D43;
        --es-danger:       #F0765F;
        --es-danger-soft:  #3B1D19;

        --es-campaign-blue:      #6EA3FF;
        --es-on-campaign-blue:   #0E1014;
        --es-campaign-coral:     #FFAD7A;
        --es-on-campaign-coral:  #0E1014;
        --es-campaign-teal:      #70D3A8;
        --es-on-campaign-teal:   #0E1014;
        --es-hero-bg:            #123D3B;
        --es-hero-fg:            #F7FAF8;
        --es-card-sky:           #20354C;
        --es-card-mint:          #1B3939;
        --es-card-sand:          #3A3030;
        --es-scene-opacity:      .12;

        --es-action:            #9DBFFF;
        --es-action-hover:      #BED4FF;
        --es-on-action:         #102344;
        --es-action-soft:       #1D3559;

        --es-skeleton-base:      #20252E;
        --es-skeleton-highlight: #39404E;

        /* Giu dong bo voi dark thu cong, co test so sanh palette. */
        --es-brand-bg:    #19365B;

        /* Volt tuong phan ro tren cac be mat toi. */
        --es-focus:       #D4F23B;
        --es-focus-glow:  rgba(212, 242, 59, .22);

        --es-shadow-1: 0 2px 6px -2px rgba(0, 0, 0, .45);
        --es-shadow-2: 0 14px 30px -16px rgba(0, 0, 0, .60);
    }
}