/* =========================================================
   ONEETSAKO DESIGN SYSTEM
   VARIABLES.CSS
   FLUID MASTER SYSTEM
   ---------------------------------------------------------
   • Desktop is the visual standard
   • Continuous fluid scaling
   • No responsive layout media queries
   • clamp() controls typography and spacing
   • Paragraphs remain highly visible
   • H2 / H3 remain readable
   • Telemetry remains visible
   • Grids use fluid min/max values
   ========================================================= */

:root {

  /* =======================================================
     COLORS — CULTURAL + NATURE
     ======================================================= */

  --bg-primary: #050807;
  --bg-secondary: #0b1412;

  --forest-green: #0f3d2e;
  --deep-green: #06261d;

  --gold: #d6b46b;
  --soft-gold: rgba(214, 180, 107, 0.6);

  --white: #ffffff;
  --soft-white: rgba(255, 255, 255, 0.85);

  --mist: rgba(200, 220, 210, 0.08);


  /* =======================================================
     TYPOGRAPHY
     DESKTOP = VISUAL STANDARD
     EVERYTHING SCALES CONTINUOUSLY
     ======================================================= */

  --font-main:
    "Tempus Sans ITC",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;


  /* =======================================================
     MASTER DISPLAY TYPOGRAPHY
     ======================================================= */

  --text-xl:
    clamp(1.6rem, 3vw, 3rem);

  --text-lg:
    clamp(1.25rem, 2.4vw, 2rem);

  --text-md:
    clamp(1.05rem, 1.7vw, 1.5rem);

  --text-sm:
    clamp(0.95rem, 1.25vw, 1.15rem);


  /* =======================================================
     MASTER SECTION TYPOGRAPHY
     ======================================================= */

  /* H2 */

  --title-h2-size:
    clamp(1.25rem, 2.4vw, 2rem);

  /* H3 */

  --title-h3-size:
    clamp(1.05rem, 1.7vw, 1.55rem);

  /* Paragraphs */

  --body-p-size:
    clamp(1rem, 1.45vw, 1.25rem);

  /* Links */

  --link-a-size:
    clamp(0.9rem, 1.1vw, 1.05rem);

  /* Telemetry */

  --telemetry-size:
    clamp(0.72rem, 0.95vw, 0.95rem);

  /* Labels */

  --label-size:
    clamp(0.7rem, 0.85vw, 0.9rem);


  /* =======================================================
     LETTER SPACING
     ======================================================= */

  --letter-spacing:
    clamp(1px, 0.2vw, 3px);

  --heading-spacing:
    clamp(1.5px, 0.35vw, 4px);


  /* =======================================================
     FLUID SPACING
     ======================================================= */

  --space-xs:
    clamp(6px, 0.5vw, 10px);

  --space-sm:
    clamp(12px, 1vw, 18px);

  --space-md:
    clamp(20px, 2vw, 30px);

  --space-lg:
    clamp(36px, 4vw, 60px);

  --space-xl:
    clamp(70px, 8vw, 120px);


  /* =======================================================
     MASTER SECTION SYSTEM
     ======================================================= */

  --section-width:
    min(92vw, 1200px);

  --section-padding:
    clamp(80px, 10vw, 150px);

  --section-margin:
    clamp(90px, 12vw, 180px);

  --section-gap:
    clamp(100px, 14vw, 220px);

  --feature-section-margin:
    clamp(120px, 17vw, 260px);


  /* =======================================================
     CONTENT WIDTHS
     ======================================================= */

  --content-wide:
    min(94vw, 1400px);

  --content-standard:
    min(92vw, 1200px);

  --content-medium:
    min(88vw, 900px);

  --content-narrow:
    min(88vw, 720px);


  /* =======================================================
     FLUID GRID SYSTEM
     ======================================================= */

  --grid-min:
    clamp(210px, 24vw, 280px);

  --grid-gap:
    clamp(18px, 2.5vw, 36px);


  /* =======================================================
     EFFECTS
     ======================================================= */

  --blur-sm:
    clamp(6px, 0.7vw, 10px);

  --blur-md:
    clamp(12px, 1.3vw, 18px);

  --blur-lg:
    clamp(24px, 2.5vw, 36px);

  --shadow-soft:
    0 10px 40px rgba(0, 0, 0, 0.4);

  --glow-gold:
    0 0 20px rgba(214, 180, 107, 0.25);


  /* =======================================================
     RADIUS
     ======================================================= */

  --radius-sm:
    clamp(6px, 0.7vw, 10px);

  --radius-md:
    clamp(10px, 1vw, 16px);

  --radius-lg:
    clamp(14px, 1.5vw, 22px);


  /* =======================================================
     ANIMATION SPEEDS
     ======================================================= */

  --fast: 0.2s;
  --normal: 0.6s;
  --slow: 1.2s;
  --very-slow: 3s;


  /* =======================================================
     TRANSITIONS
     ======================================================= */

  --ease-fluid:
    cubic-bezier(0.16, 1, 0.3, 1);
}