/* KLEO design tokens, self-contained for the flatfinder deployment.
   Source of truth: Spe4-5-KLEO/tokens/*.css (KLEO Design System). */

/* --- fonts (Cairo, brand typeface) --- */
@font-face{font-family:"Cairo";src:url("../assets/fonts/Cairo-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Cairo";src:url("../assets/fonts/Cairo-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cairo";src:url("../assets/fonts/Cairo-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Cairo";src:url("../assets/fonts/Cairo-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

/* --- colors --- */
:root{
  --kleo-petrol:#264B4B;
  --kleo-petrol-tint:#345654;
  --kleo-petrol-deep:#1C3A3A;
  --kleo-sand:#D0CEC5;
  --kleo-sand-light:#E8E8E0;
  --kleo-gold:#BF9140;
  --kleo-gold-deep:#9E8243;
  --kleo-ink:#1A1A1A;
  --kleo-grey:#6E6E6E;
  --kleo-grey-light:#B3B3B3;
  --kleo-white:#FFFFFF;
  --kleo-paper:#FBFBFA;

  --bg-page:var(--kleo-paper);
  --bg-inverse:var(--kleo-petrol);
  --bg-sand:var(--kleo-sand);
  --bg-sand-light:var(--kleo-sand-light);
  --surface-card:var(--kleo-sand-light);
  --surface-card-inverse:var(--kleo-petrol-tint);

  --text-primary:var(--kleo-ink);
  --text-secondary:var(--kleo-grey);
  --text-tertiary:var(--kleo-grey-light);
  --text-inverse:var(--kleo-white);
  --text-inverse-secondary:var(--kleo-sand);
  --text-accent:var(--kleo-gold);
  --text-on-petrol-heading:var(--kleo-white);

  --accent:var(--kleo-gold);
  --accent-hover:var(--kleo-gold-deep);

  --border-hairline:rgba(26,26,26,.16);
  --border-hairline-inverse:rgba(255,255,255,.22);
  --border-sand:var(--kleo-sand);

  --overlay-scrim:linear-gradient(to top,rgba(38,75,75,.72),rgba(38,75,75,0));
  --gradient-brand:linear-gradient(90deg,#264B4B 0%,#7D8C8B 45%,#E3E3E1 78%,#FFFFFF 100%);

  /* --- typography --- */
  --font-display:"Cairo",system-ui,sans-serif;
  --font-body:"Cairo",system-ui,sans-serif;
  --fw-extralight:200;
  --fw-light:300;
  --fw-regular:400;
  --fw-semibold:600;
  --fw-bold:700;
  --fs-logo:64px;
  --fs-display:44px;
  --fs-h1:34px;
  --fs-h2:26px;
  --fs-h3:20px;
  --fs-lead:17px;
  --fs-body:14px;
  --fs-body-sm:13px;
  --fs-label:11px;
  --fs-micro:9px;
  --lh-tight:1.08;
  --lh-heading:1.16;
  --lh-body:1.5;
  --lh-body-tight:1.38;
  --tracking-logo:.16em;
  --tracking-tagline:.22em;
  --tracking-label:.10em;
  --tracking-normal:0;

  /* --- spacing --- */
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;
  --page-margin:88px;
  --column-gap:40px;
  --measure-column:340px;
  --measure-heading:20ch;

  /* --- shape --- */
  --radius-none:0;
  --radius-sm:4px;
  --radius-image:12px;
  --radius-card:16px;
  --radius-pill:999px;
  --hairline:1px;
  --rule-strong:2px;
  --shadow-none:none;
  --shadow-tile:0 2px 10px rgba(26,26,26,.08);
  --shadow-float:0 10px 30px rgba(26,26,26,.14);

  /* --- motion --- */
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --dur-fast:120ms;
  --dur-base:220ms;
  --dur-slow:420ms;
}

/* --- base --- */
html{-webkit-font-smoothing:antialiased}
body{margin:0;background:var(--bg-page);color:var(--text-primary);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-light)}
a{color:var(--text-accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--accent-hover);border-bottom-color:currentColor}
img{max-width:100%;display:block}
::selection{background:var(--kleo-gold);color:var(--kleo-white)}