/* Design tokens: color, type, spacing, elevation, motion.
   Light theme and compact density reassign these variables.
   Components should use the variables, not raw hex values.
   Portal skins in 13-portals.css and the signed-in shell in 14-overrides.css
   reassign --cyan* for their own pages. */

:root {
    /* ---- Takefat 2.0 design tokens ------------------------------------
       Layer 1: color, Arabic type, 8pt spacing, elevation, motion, density.
       Portals re-skin --cyan* via .tk-portal--* without rewriting components.
       ----------------------------------------------------------------- */
    --bg:            #07090C;
    --bg-raised:     #10141A;
    --bg-card:       #151A21;
    --bg-input:      #0C1016;
    --header-bg:     rgba(7, 9, 12, .92);
    --footer-bg:     #05070A;

    --cyan:          #00B4E6;
    --cyan-bright:   #3AD0F7;
    --cyan-dim:      rgba(0, 180, 230, 0.14);
    --cyan-line:     rgba(0, 180, 230, 0.36);

    --text:          #F7FAFC;
    --silver:        #D5DCE4;
    --silver-dim:    #9AA4B0;
    --silver-faint:  #6A7480;
    --logo-metal:    #C9D0D6;

    --line:          #252B34;
    --line-soft:     #1A1F27;

    --ok:            #2ECC8F;
    --warn:          #E8B339;
    --danger:        #E8574A;
    --badge-ok:      #67E3B4;
    --badge-warn:    #F0CB72;
    --badge-danger:  #F0857B;
    --btn-danger:    #F0857B;

    /* 8pt spacing scale */
    --space-1:       4px;
    --space-2:       8px;
    --space-3:       12px;
    --space-4:       16px;
    --space-5:       24px;
    --space-6:       32px;
    --space-7:       48px;
    --space-8:       64px;

    /* Arabic-tuned type */
    --font:          'Cairo', 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;
    --fs-base:       17px;
    --lh-base:       1.75;
    --fs-xs:         .78rem;
    --fs-sm:         .88rem;
    --fs-md:         1rem;
    --fs-lg:         1.15rem;
    --fs-xl:         1.45rem;
    --fs-2xl:        1.85rem;
    --fs-3xl:        clamp(2rem, 4.5vw, 2.85rem);
    --fs-display:    clamp(2.2rem, 5.5vw, 3.4rem);

    --radius:        16px;
    --radius-sm:     10px;
    --radius-lg:     24px;
    --radius-pill:   999px;

    --shadow:        0 12px 36px rgba(0, 0, 0, 0.5);
    --shadow-pop:    0 18px 44px rgba(0, 0, 0, 0.38);
    --shadow-up:     0 -10px 30px rgba(0, 0, 0, 0.3);
    --bg-hover:      #1C232C;
    --focus-ring:    rgba(0, 180, 230, .2);

    /* Motion */
    --ease:          cubic-bezier(.22, 1, .36, 1);
    --dur-fast:      .15s;
    --dur:           .22s;
    --dur-slow:      .4s;

    /* Table density (comfortable default; compact via html[data-density=compact]) */
    --tk-row-y:      12px;
    --tk-touch:      48px;

    --maxw:          1200px;
    --hero-glow:     radial-gradient(1000px 420px at 78% -12%, rgba(0, 180, 230, .18), transparent 62%),
                     radial-gradient(700px 340px at 8% 108%, rgba(0, 180, 230, .08), transparent 60%);
}

html[data-theme="light"] {
    --bg:            #F3F6F9;
    --bg-raised:     #FFFFFF;
    --bg-card:       #FFFFFF;
    --bg-input:      #FFFFFF;
    --header-bg:     rgba(255, 255, 255, .94);
    --footer-bg:     #E2EAF1;

    --cyan:          #007EA8;
    --cyan-bright:   #0098C8;
    --cyan-dim:      rgba(0, 126, 168, 0.12);
    --cyan-line:     rgba(0, 126, 168, 0.32);

    --text:          #15202B;
    --silver:        #33404D;
    --silver-dim:    #3F4C58;
    --silver-faint:  #546270;
    --logo-metal:    #5C6B78;

    --line:          #C5D0DB;
    --line-soft:     #DCE4EC;

    --ok:            #1A8A5C;
    --warn:          #9A6B00;
    --danger:        #C0392B;
    --badge-ok:      #1A8A5C;
    --badge-warn:    #9A6B00;
    --badge-danger:  #C0392B;
    --btn-danger:    #C0392B;

    --shadow:        0 10px 28px rgba(21, 32, 43, 0.08);
    --shadow-pop:    0 14px 36px rgba(21, 32, 43, 0.14);
    --shadow-up:     0 -8px 24px rgba(21, 32, 43, 0.10);
    --bg-hover:      #E8EEF3;
    --focus-ring:    rgba(0, 126, 168, .22);
    --hero-glow:     radial-gradient(1000px 420px at 78% -12%, rgba(0, 126, 168, .12), transparent 62%),
                     radial-gradient(700px 340px at 8% 108%, rgba(0, 126, 168, .06), transparent 60%);
}

html[data-density="compact"] {
    --tk-row-y: 7px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

html[data-theme="light"] .tk-card,
html[data-theme="light"] .tk-service,
html[data-theme="light"] .tk-step--card,
html[data-theme="light"] .tk-faq__item,
html[data-theme="light"] .tk-request-card {
    box-shadow: var(--shadow);
}

html[data-theme="light"] .tk-input:-webkit-autofill,
html[data-theme="light"] .tk-textarea:-webkit-autofill,
html[data-theme="light"] .tk-select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: #15202B;
    caret-color: #15202B;
}

html[data-theme="light"] .tk-heat__dismiss:hover {
    background: rgba(21, 32, 43, .08);
}
html[data-theme="light"] .tk-hero--photo .tk-heat__dismiss:hover {
    background: rgba(255, 255, 255, .12);
}