/* =========================================================
   LOGOS Landing — Local Persian Fonts
   ========================================================= */

@font-face {
  font-family: "Ray";
  src: url("../fonts/Ray-Light.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Ray";
  src: url("../fonts/Ray.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Ray";
  src: url("../fonts/Ray-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Ray";
  src: url("../fonts/Ray-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Ray";
  src: url("../fonts/Ray-ExtraBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Ray";
  src: url("../fonts/Ray-Black.ttf") format("truetype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "Ray";
  src: url("../fonts/Ray-ExtraBlack.ttf") format("truetype");
  font-style: normal;
  font-weight: 950;
  font-display: swap;
}

@font-face {
  font-family: "Tahamtan";
  src: url("../fonts/Tahamtan.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  /* Typography */
  --logos-font-fa:
    "Ray",
    Tahoma,
    Arial,
    sans-serif;

  --logos-font-display-fa:
    "Ray",
    Tahoma,
    Arial,
    sans-serif;

  --logos-font-en:
    "Ray",
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;
  /* Base colors */
  --logos-white: #ffffff;
  --logos-black: #000000;

  --logos-bg: #f7fcfa;
  --logos-bg-soft: #eef9f4;
  --logos-bg-deep: #e5f5ee;

  --logos-surface: rgba(255, 255, 255, 0.78);
  --logos-surface-strong: rgba(255, 255, 255, 0.94);
  --logos-surface-muted: rgba(241, 251, 247, 0.78);

  --logos-ink: #062d23;
  --logos-ink-2: #19483b;
  --logos-ink-3: #527067;
  --logos-ink-muted: #718b83;

  --logos-deep: #005f43;
  --logos-deep-2: #074a37;
  --logos-deep-3: #032f23;

  --logos-mint: #00c985;
  --logos-mint-2: #23dda0;
  --logos-mint-3: #63efbe;
  --logos-mint-soft: #c8f9e6;
  --logos-mint-pale: #ebfff7;

  --logos-cyan: #62dff0;
  --logos-sky: #89ddff;
  --logos-gold: #e9c16f;

  --logos-danger: #d63c55;
  --logos-danger-soft: #fff1f3;

  --logos-success: #079869;
  --logos-success-soft: #e7fff5;

  /* Borders */
  --logos-line: rgba(0, 95, 67, 0.13);
  --logos-line-soft: rgba(0, 95, 67, 0.08);
  --logos-line-strong: rgba(0, 95, 67, 0.24);
  --logos-line-active: rgba(0, 201, 133, 0.58);

  /* Shadows */
  --logos-shadow-xs:
    0 4px 14px rgba(0, 70, 49, 0.06);

  --logos-shadow-sm:
    0 10px 30px rgba(0, 70, 49, 0.08);

  --logos-shadow-md:
    0 20px 60px rgba(0, 70, 49, 0.12);

  --logos-shadow-lg:
    0 34px 110px rgba(0, 58, 41, 0.16);

  --logos-shadow-panel:
    0 30px 90px rgba(0, 47, 33, 0.22);

  --logos-shadow-glow:
    0 0 0 1px rgba(0, 201, 133, 0.08),
    0 14px 42px rgba(0, 201, 133, 0.18),
    0 0 80px rgba(0, 201, 133, 0.14);

  --logos-shadow-glow-strong:
    0 0 0 1px rgba(0, 201, 133, 0.22),
    0 20px 55px rgba(0, 201, 133, 0.28),
    0 0 110px rgba(0, 201, 133, 0.22);

  /* Blur */
  --logos-blur-sm: 10px;
  --logos-blur-md: 18px;
  --logos-blur-lg: 28px;

  /* Radius */
  --logos-radius-xs: 0.55rem;
  --logos-radius-sm: 0.85rem;
  --logos-radius-md: 1.1rem;
  --logos-radius-lg: 1.45rem;
  --logos-radius-xl: 1.9rem;
  --logos-radius-2xl: 2.4rem;
  --logos-radius-pill: 999px;

  /* Spacing */
  --logos-space-1: 0.25rem;
  --logos-space-2: 0.5rem;
  --logos-space-3: 0.75rem;
  --logos-space-4: 1rem;
  --logos-space-5: 1.25rem;
  --logos-space-6: 1.5rem;
  --logos-space-7: 1.75rem;
  --logos-space-8: 2rem;
  --logos-space-10: 2.5rem;
  --logos-space-12: 3rem;
  --logos-space-16: 4rem;

  /* Layout */
  --logos-page-padding-inline:
    clamp(1rem, 2.8vw, 3.5rem);

  --logos-page-padding-block:
    clamp(0.75rem, 1.7vh, 1.5rem);

  --logos-topbar-height: 4.75rem;
  --logos-panel-width: clamp(22rem, 29vw, 29rem);

  --logos-stage-world-height: 72svh;
  --logos-stage-world-ratio: 1.6;

  /* Timing */
  --logos-duration-fast: 160ms;
  --logos-duration-normal: 280ms;
  --logos-duration-slow: 520ms;
  --logos-duration-scene: 760ms;

  --logos-ease:
    cubic-bezier(0.22, 1, 0.36, 1);

  --logos-ease-soft:
    cubic-bezier(0.25, 0.8, 0.25, 1);

  --logos-ease-spring:
    cubic-bezier(0.16, 1.35, 0.42, 1);

  /* Z indexes */
  --logos-z-background: 0;
  --logos-z-frame: 5;
  --logos-z-module: 10;
  --logos-z-core: 15;
  --logos-z-copy: 25;
  --logos-z-interface: 40;
  --logos-z-topbar: 60;
  --logos-z-panel: 100;
  --logos-z-dialog: 200;
  --logos-z-skip: 1000;

  /* Safe areas */
  --logos-safe-top:
    env(safe-area-inset-top, 0px);

  --logos-safe-right:
    env(safe-area-inset-right, 0px);

  --logos-safe-bottom:
    env(safe-area-inset-bottom, 0px);

  --logos-safe-left:
    env(safe-area-inset-left, 0px);
}