:root {
  color-scheme: light;

  
  --paper:            #FAF8F4;  
  --sunken:           #F3EFE8;  
  --card:             #FFFFFF;  
  --hairline:         #E8E3D9;  
  --border-strong:    #8B857D;  
  --muted:            #6B655D;  
  --ink:              #231F20;  

  
  
  --canvas:            #16120F;  
  --raised:            #28231F;  
  --hairline-dark:     #393430;  
  --border-strong-dark:#79736F;  
  --muted-on-dark:     #A39C92;  

  
  --mark:             #D64C12;  
  --solid:            #C74100;  
  --fill:             #C74100;  
  --deep:             #9D3100;  
  --on-dark:          #D56D4A;  
  --surface:          #FEE0D6;  

  
  --solid-hover:      #B03800;  
  --solid-active:     #993000;  
  --fill-hover:       #B03800;  
  --fill-active:      #993000;  
  
  --focus-ring:       var(--mark);          
  --row-hover:        #FFF0EB;  
  --row-selected:     #FFE7DF;  
  --disabled-text:    #A8A29A;
  --disabled-fill:    #EDEAE4;

  
  --positive:         #42774E;  
  --positive-surface: #DBEEDE;
  --caution:          #8F5D00;  
  --caution-surface:  #F8E5CB;
  --critical:         #A74541;  
  --critical-surface: #FFDDD9;

  
  
  --series-1:         #CA4C1C;  
  --series-2:         #01A19C;  
  --series-3:         #B88A06;  
  --series-4:         #5F38A7;  
  --series-5:         #039039;  
  --series-6:         #008FD2;  
  --series-7:         #9E3081;  
  

  
  --seq-100:          #FFE5DC;
  --seq-200:          #FEC5B2;
  --seq-300:          #F5A388;  
  --seq-400:          #E58362;
  --seq-500:          #D15F37;
  --seq-600:          #B63E09;
  --seq-700:          #8F2C00;

  
  --div-neg-3:        #005885;
  --div-neg-2:        #017CB7;
  --div-neg-1:        #6EACD7;
  --div-mid:          #EFEBE4;  
  --div-pos-1:        #D6917B;
  --div-pos-2:        #BD4C23;
  --div-pos-3:        #8F2C00;

  
  --chart-surface:    var(--card);
  --chart-grid:       #E8E3D9;  
  --chart-baseline:   #C9C2B6;
  --chart-ink:        var(--ink);
  --chart-ink-2:      var(--muted);

  
  
  --font-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-slab:    'Zilla Slab', Georgia, 'Times New Roman', serif;
  
  --font-arabic:         'Almarai', 'Cairo', 'Noto Sans Arabic', system-ui, sans-serif;
  
  --font-arabic-display: 'Almarai', 'Cairo', 'Noto Sans Arabic', system-ui, sans-serif;
  --font-arabic-body:    'Readex Pro', 'Noto Sans Arabic', system-ui, sans-serif;  

  

  
  --text-display-xl:          72px;
  --text-display-xl-mobile:   44px;
  --weight-display-xl:        800;
  --leading-display-xl:       1.05;
  --tracking-display-xl:      -0.02em;

  
  --text-h1:                  48px;
  --text-h1-mobile:           34px;
  --weight-h1:                800;
  --leading-h1:               1.1;
  --tracking-h1:              -0.015em;

  
  --text-h2:                  32px;
  --text-h2-mobile:           26px;
  --weight-h2:                700;
  --leading-h2:               1.2;
  --tracking-h2:              -0.01em;

  
  --text-h3:                  24px;
  --text-h3-mobile:           20px;
  --weight-h3:                600;
  --leading-h3:               1.3;
  --tracking-h3:              0;

  
  --text-h4:                  20px;
  --weight-h4:                600;
  --leading-h4:               1.4;
  --tracking-h4:              0;

  
  --text-body-lg:             18px;
  --text-body-lg-mobile:      17px;
  --weight-body-lg:           400;
  --leading-body-lg:          1.6;
  --tracking-body-lg:         0;

  
  --text-body:                16px;
  --text-body-mobile:         16px;
  --weight-body:              400;
  --leading-body:             1.6;
  --tracking-body:            0;

  
  --text-body-sm:             14px;
  --weight-body-sm:           400;
  --leading-body-sm:          1.5;
  --tracking-body-sm:         0;

  
  --text-caption:             12px;
  --weight-caption:           500;
  --leading-caption:          1.4;
  --tracking-caption:         0.02em;

  
  --text-eyebrow:             12px;
  --text-eyebrow-mobile:      12px;
  --weight-eyebrow:           500;
  --leading-eyebrow:          1.2;
  --tracking-eyebrow:         0.15em;
  --case-eyebrow:             uppercase;

  
  --text-code:                14px;
  --text-code-mobile:         14px;
  --weight-code:              400;
  --leading-code:             1.6;
  --tracking-code:            0;

  
  --text-statement:           clamp(28px, 3.4vw, 40px);
  --text-statement-min:       28px;
  --text-statement-max:       40px;
  --text-statement-mobile:    24px;
  --weight-statement:         600;
  --style-statement:          normal;   
  --leading-statement:        1.25;
  --tracking-statement:       -0.01em;

  
  --text-quote:               clamp(22px, 2.4vw, 28px);
  --text-quote-min:           22px;
  --text-quote-max:           28px;
  --text-quote-mobile:        20px;
  --weight-quote:             300;
  --style-quote:              italic;
  --leading-quote:            1.4;
  --tracking-quote:           0;

  
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;
  --space-3xl:  96px;

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

  
  
  --duration-fast: 150ms;   
  --duration-base: 250ms;   
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  
  
  --dash-thickness-sm: 2px;   
  --dash-thickness:    3px;   
  --dash-thickness-lg: 6px;   
  --dash-thickness-xl: 9px;   

  --dash-length-sm:   24px;   
  --dash-length:      40px;   
  --dash-length-lg:   56px;   
  

  --dash-gap: var(--space-md);    
  

  
  --dash-edge-run:    0.092;   
  --dash-edge-rise:   0.724;   
  --dash-chamfer-run: 0.317;   
  --dash-chamfer-rise:0.276;   
  --dash-end-offset:  0.409;   

  
  --chamfer-ratio: 1.149;      
  --chamfer-icon:  18%;        
  --chamfer-lg:    16px;       
  --chamfer-md:    12px;       
  --chamfer-sm:    9px;        

  
}

.brand-kleave {
  --mark: #237976; --solid: #267B78; --fill: #267B78; --deep: #02605E; --on-dark: #459793; --surface: #D7EDEC;
  --solid-hover: #0E6C6A; --solid-active: #035D5B; --fill-hover: #0E6C6A; --fill-active: #035D5B;
  --row-hover: #ECF6F5; --row-selected: #E0F1F0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --paper:         #16120F;  
    --sunken:        #100D0B;
    --card:          #28231F;  
    --hairline:      #393430;  
    --border-strong: #79736F;  
    --muted:         #A39C92;  
    --ink:           #FFFFFF;  

    
    --solid:         var(--on-dark);
    --deep:          #D56D4A;
    --surface:       #49271C;  
    --solid-hover:   #E8A98F;
    --solid-active:  #F0C0AB;
    --focus-ring:    var(--on-dark);  
    --row-hover:     #3A2721;
    --row-selected:  #4F3026;
    --disabled-text: #504C4A;
    --disabled-fill: #221D1A;

    --positive: #7EB488; --positive-surface: #1E3924;
    --caution:  #CD9A50; --caution-surface:  #432D07;
    --critical: #E18881; --critical-surface: #4C2422;

    
    --series-1: #CD623E; --series-2: #05A8A3; --series-3: #B68906; --series-4: #8265C6;
    --series-5: #3B9D51; --series-6: #1A9CE1; --series-7: #AA4D8F;

    --div-mid:        #383330;
    --chart-grid:     #393430;
    --chart-baseline: #4A443F;
  }
  
  :root:not([data-theme="light"]).brand-kleave    { --deep:#459793; --surface:#203635; --solid-hover:#459793; --solid-active:#459793; --row-hover:#1C2F2E; --row-selected:#243C3B; }
  :root:not([data-theme="light"])}

:root[data-theme="dark"] {
  color-scheme: dark;

  --paper:         #16120F;
  --sunken:        #100D0B;
  --card:          #28231F;
  --hairline:      #393430;
  --border-strong: #79736F;
  --muted:         #A39C92;
  --ink:           #FFFFFF;

  --solid:         var(--on-dark);  
  --deep:          #D56D4A;
  --surface:       #49271C;
  --solid-hover:   #E8A98F;
  --solid-active:  #F0C0AB;
  --focus-ring:    var(--on-dark);
  --row-hover:     #3A2721;
  --row-selected:  #4F3026;
  --disabled-text: #504C4A;
  --disabled-fill: #221D1A;

  --positive: #7EB488; --positive-surface: #1E3924;
  --caution:  #CD9A50; --caution-surface:  #432D07;
  --critical: #E18881; --critical-surface: #4C2422;

  --series-1: #CD623E; --series-2: #05A8A3; --series-3: #B68906; --series-4: #8265C6;
  --series-5: #3B9D51; --series-6: #1A9CE1; --series-7: #AA4D8F;

  --div-mid:        #383330;
  --chart-grid:     #393430;
  --chart-baseline: #4A443F;
}

:root[data-theme="dark"].brand-kleave    { --deep:#459793; --surface:#203635; --solid-hover:#459793; --solid-active:#459793; --row-hover:#1C2F2E; --row-selected:#243C3B; }
:root[data-theme="dark"]
body { background: var(--paper); color: var(--ink); }
a { color: var(--solid); }
a:hover { color: var(--solid-hover); }

:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :focus-visible { outline-color: var(--on-dark); }
}
:root[data-theme="dark"] :focus-visible { outline-color: var(--on-dark); }
input, select, textarea { border: 1px solid var(--border-strong); background: var(--card); color: var(--ink); }
button { background: var(--fill); color: #FFFFFF; border: none; }
button:hover { background: var(--fill-hover); }
button:active { background: var(--fill-active); }
input:disabled, button:disabled { color: var(--disabled-text); background: var(--disabled-fill); }

.dash {
  --_t: var(--dash-thickness);              
  display: block;
  flex: none;
  height: var(--_t);
  width: var(--dash-length);
  background: var(--dash-color, var(--mark));   
  border-radius: 0;
  
  clip-path: polygon(
    0 100%,
    calc(var(--_t) * var(--dash-edge-run))    calc(var(--_t) * var(--dash-chamfer-rise)),
    calc(var(--_t) * var(--dash-end-offset))  0,
    100% 0,
    calc(100% - var(--_t) * var(--dash-edge-run))   calc(var(--_t) * var(--dash-edge-rise)),
    calc(100% - var(--_t) * var(--dash-end-offset)) 100%
  );
}
.dash-sm   { --_t: var(--dash-thickness-sm); width: var(--dash-length-sm); }
.dash-lg   { --_t: var(--dash-thickness-lg); width: var(--dash-length-lg); }
.dash-xl   { --_t: var(--dash-thickness-xl); width: var(--dash-length-lg); }
.dash-full { width: 100%; }

.dash-square { clip-path: none; }

.ch {
  --ch: var(--chamfer-lg);
  
  --_chv: calc(var(--ch) / 1.022);
  border-radius: 0;
  transform: skewX(-7.2deg);
  clip-path: polygon(
    var(--ch) 0, 100% 0,
    100% calc(100% - var(--_chv)),
    calc(100% - var(--ch)) 100%,
    0 100%, 0 var(--_chv)
  );
}
.ch > * { transform: skewX(7.2deg); }
.ch-sm { --ch: var(--chamfer-sm); }
.ch-md { --ch: var(--chamfer-md); }
.ch-lg { --ch: var(--chamfer-lg); }

.ch:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px #FFFFFF, inset 0 0 0 4px var(--mark);
}
:root[data-theme="dark"] .ch:focus-visible,
.ch.on-dark:focus-visible {
  box-shadow: inset 0 0 0 2px var(--canvas), inset 0 0 0 4px var(--on-dark);
}