/*! Calculi-TN (calculi.tn) - (c) 2022-2026 Ali Abdelkader Aydi. All rights reserved.
 *  Proprietary and confidential. Reproduction, redistribution or reuse of this
 *  file, in whole or in part, is prohibited without written permission.
 *  Contact: aliayditn02@gmail.com */

:root {
  
  --ink-900: #0b1519; 
  --ink-700: #24363e; 
  --ink-500: #5a6e78; 

  
  --ink-300: #90a4ad;

  --paper: #ffffff; 
  --paper-2: #f4f7f8; 
  --paper-3: #e8eef0; 

  --rule: #d7e1e5; 
  --rule-2: #bccad0; 
  --rule-ink: var(--ink-900); 

  
  --brand: #1d6484;
  --brand-700: #14495f;
  --brand-900: #0d3243;
  --brand-100: #e2eef3;

  
  --mark: #b0392a; 
  --mark-100: #f8e7e4;
  --ok: #1a6f52; 
  --ok-100: #dff0e8;
  --gold: #9a6b12; 
  --gold-100: #f6edd8;

  
  --tess-1: #1d6484; 
  --tess-2: #0f7b6c; 
  --tess-3: #b8791a; 
  --tess-4: #b04a2f; 
  --tess-5: #63722f; 
  --tess-6: #77395f; 

  --tess-1-ink: #17546f;
  --tess-2-ink: #0c6559;
  --tess-3-ink: #8a5a10;
  --tess-4-ink: #933c26;
  --tess-5-ink: #4e5a25;
  --tess-6-ink: #632f4f;

  --tess-1-wash: #e4eff4;
  --tess-2-wash: #ddf1ee;
  --tess-3-wash: #f7ecd8;
  --tess-4-wash: #f8e8e2;
  --tess-5-wash: #eef1e0;
  --tess-6-wash: #f4e7ef;

  
  --tess: var(--tess-1);
  --tess-ink: var(--tess-1-ink);
  --tess-wash: var(--tess-1-wash);

  
  --font-display: "Reem Kufi", "IBM Plex Sans Arabic", sans-serif;
  --font-body: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui,
    -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo,
    Consolas, monospace;

  
  --t-2xs: 0.75rem; 
  --t-xs: 0.8125rem; 
  --t-sm: 0.875rem; 
  --t-base: 1rem; 
  --t-md: 1.125rem; 
  --t-lg: 1.375rem; 
  --t-xl: 1.75rem; 
  --t-2xl: 2.25rem; 
  --t-3xl: 2.875rem; 
  --t-4xl: 4rem; 
  --t-5xl: 5.25rem; 

  --lh-tight: 1.15;
  --lh-snug: 1.4;
  --lh-body: 1.8; 

  
  --track-display: -0.015em;

  
  --track-stamp: 0.09em;

  
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  
  --radius: 4px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  
  --shadow-1: 0 1px 2px rgb(11 21 25 / 0.06), 0 2px 8px -4px rgb(11 21 25 / 0.1);
  --shadow-2: 0 2px 4px rgb(11 21 25 / 0.06), 0 12px 24px -10px rgb(11 21 25 / 0.16);
  --shadow-3: 0 4px 8px rgb(11 21 25 / 0.07), 0 24px 48px -16px rgb(11 21 25 / 0.24);
  --shadow-pop: 0 12px 32px -8px rgb(11 21 25 / 0.28),
    0 2px 6px -2px rgb(11 21 25 / 0.16);

  --measure: 68ch; 
  --wrap: 1220px; 
  --wrap-wide: 1440px; 
  --wrap-narrow: 860px;

  --dur: 140ms;
  --dur-2: 260ms; 
  --dur-3: 520ms; 
  --ease: cubic-bezier(0.2, 0, 0.13, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); 

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink-900: #e3ecf0;
    --ink-700: #b9c9d1;
    --ink-500: #8698a2;
    --ink-300: #5b6d78;

    --paper: #101c23;
    --paper-2: #16242c;
    --paper-3: #1e2f38;

    --rule: #273a44;
    --rule-2: #38505b;
    --rule-ink: #4a6673;

    --brand: #6cb2d2;
    --brand-700: #8fc9e3;
    --brand-900: #b6dcee;
    --brand-100: #16323f;

    --mark: #e08a7c;
    --mark-100: #34191a;
    --ok: #6cbb99;
    --ok-100: #12291f;
    --gold: #d3a854;
    --gold-100: #2b2314;

    
    --tess-1: #5fa8c8;
    --tess-2: #4fbaa8;
    --tess-3: #dda94e;
    --tess-4: #e08a6e;
    --tess-5: #a4b566;
    --tess-6: #c084a6;

    --tess-1-ink: #86c2dc;
    --tess-2-ink: #74cfbe;
    --tess-3-ink: #e8bd72;
    --tess-4-ink: #eda78f;
    --tess-5-ink: #bdcb8a;
    --tess-6-ink: #d3a3bd;

    --tess-1-wash: #16323f;
    --tess-2-wash: #123430;
    --tess-3-wash: #332912;
    --tess-4-wash: #3a221a;
    --tess-5-wash: #262c15;
    --tess-6-wash: #331f2b;

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 8px -4px rgb(0 0 0 / 0.5);
    --shadow-2: 0 2px 4px rgb(0 0 0 / 0.4), 0 12px 24px -10px rgb(0 0 0 / 0.6);
    --shadow-3: 0 4px 8px rgb(0 0 0 / 0.45), 0 24px 48px -16px rgb(0 0 0 / 0.7);
    --shadow-pop: 0 12px 32px -8px rgb(0 0 0 / 0.6),
      0 2px 6px -2px rgb(0 0 0 / 0.4);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ink-900: #e3ecf0;
  --ink-700: #b9c9d1;
  --ink-500: #8698a2;
  --ink-300: #5b6d78;

  --paper: #101c23;
  --paper-2: #16242c;
  --paper-3: #1e2f38;

  --rule: #273a44;
  --rule-2: #38505b;
  --rule-ink: #4a6673;

  --brand: #6cb2d2;
  --brand-700: #8fc9e3;
  --brand-900: #b6dcee;
  --brand-100: #16323f;

  --mark: #e08a7c;
  --mark-100: #34191a;
  --ok: #6cbb99;
  --ok-100: #12291f;
  --gold: #d3a854;
  --gold-100: #2b2314;

  --tess-1: #5fa8c8;
  --tess-2: #4fbaa8;
  --tess-3: #dda94e;
  --tess-4: #e08a6e;
  --tess-5: #a4b566;
  --tess-6: #c084a6;

  --tess-1-ink: #86c2dc;
  --tess-2-ink: #74cfbe;
  --tess-3-ink: #e8bd72;
  --tess-4-ink: #eda78f;
  --tess-5-ink: #bdcb8a;
  --tess-6-ink: #d3a3bd;

  --tess-1-wash: #16323f;
  --tess-2-wash: #123430;
  --tess-3-wash: #332912;
  --tess-4-wash: #3a221a;
  --tess-5-wash: #262c15;
  --tess-6-wash: #331f2b;

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 8px -4px rgb(0 0 0 / 0.5);
  --shadow-2: 0 2px 4px rgb(0 0 0 / 0.4), 0 12px 24px -10px rgb(0 0 0 / 0.6);
  --shadow-3: 0 4px 8px rgb(0 0 0 / 0.45), 0 24px 48px -16px rgb(0 0 0 / 0.7);
  --shadow-pop: 0 12px 32px -8px rgb(0 0 0 / 0.6),
    0 2px 6px -2px rgb(0 0 0 / 0.4);

  color-scheme: dark;
}

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  
  scroll-padding-top: 5.5rem;
}

body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--ink-700);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--ink-900);
}

a {
  color: var(--brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  font-variant-numeric: tabular-nums;
}

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

::selection {
  background: var(--brand-100);
  color: var(--ink-900);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--s-4);
  top: -100%;
  z-index: 200;
  padding: var(--s-2) var(--s-4);
  background: var(--ink-900);
  color: var(--paper);
  border-radius: var(--radius);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--s-4);
}