/* ===========================================================================
   Cohesity — design tokens
   Colour values and type metrics sampled from the live cohesity.com build:
   body font KlavikaWeb, headings KlavikaWebCondensed @500, 10px root.
   =========================================================================== */

@font-face {
  /* Drop the licensed Klavika web fonts into assets/fonts/ and these rules
     take over automatically; otherwise the Google fallbacks below are used. */
  font-family: 'Klavika Web';
  src: url('../fonts/KlavikaWebRegular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Klavika Web';
  src: url('../fonts/KlavikaWebMedium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Klavika Web';
  src: url('../fonts/KlavikaWebBold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Klavika Web Condensed';
  src: url('../fonts/KlavikaWebMediumCond.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Klavika Web Condensed';
  src: url('../fonts/KlavikaWebBoldCond.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -- Brand ------------------------------------------------------------- */
  --c-green:        #009e60;  /* logo green, from the official RGB mark      */
  --c-green-bright: #00dd68;  /* CTA fill                                    */
  --c-neon:         #00fd92;  /* accent on dark — the signature Cohesity hit */
  --c-green-deep:   #00774c;  /* links on light                              */
  --c-green-dark:   #005944;

  /* -- Neutrals ---------------------------------------------------------- */
  --c-black:    #080808;
  --c-ink:      #0b0b0b;
  --c-ink-2:    #111315;
  --c-slate:    #1d242b;
  --c-white:    #ffffff;
  --c-gray-100: #f5f6f7;
  --c-gray-200: #f0f3f4;
  --c-gray-400: #b6bbbf;
  --c-gray-500: #878787;

  /* -- Semantic ---------------------------------------------------------- */
  --bg:           var(--c-black);
  --bg-raised:    #101215;
  --fg:           var(--c-white);
  --fg-muted:     rgba(255, 255, 255, 0.62);
  --fg-faint:     rgba(255, 255, 255, 0.40);
  --line:         rgba(255, 255, 255, 0.12);
  --line-strong:  rgba(255, 255, 255, 0.22);
  --accent:       var(--c-neon);

  /* Inverted (bright green) sections */
  --inv-bg: var(--c-neon);
  --inv-fg: var(--c-black);

  --danger: #ff5a4d;

  /* -- Type -------------------------------------------------------------- */
  --font-body: 'Klavika Web', 'Klavika', 'Chivo', -apple-system,
               BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Klavika Web Condensed', 'Klavika Condensed', 'Saira Condensed',
                  'Archivo Narrow', 'Roboto Condensed', var(--font-body);
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  /* Fluid display scale — condensed faces carry tight leading, as on
     cohesity.com where 36px type sits on a 38px line. */
  --fs-display: clamp(3.4rem, 8.4vw, 8.4rem);
  --fs-h1:      clamp(2.9rem, 5.4vw, 5.6rem);
  --fs-h2:      clamp(2.4rem, 3.6vw, 3.9rem);
  --fs-h3:      clamp(1.9rem, 2.2vw, 2.5rem);
  --fs-h4:      clamp(1.5rem, 1.5vw, 1.8rem);
  --fs-body:    clamp(1.5rem, 1.15vw, 1.7rem);
  --fs-small:   1.35rem;
  --fs-micro:   1.15rem;

  --lh-display: 0.92;
  --lh-tight:   1.06;
  --lh-body:    1.6;

  --tracking-label: 0.16em;

  /* -- Space & shape ----------------------------------------------------- */
  --gutter:  clamp(2rem, 5vw, 8rem);
  --section: clamp(8rem, 11vw, 16rem);
  --radius:      5px;   /* cohesity.com button radius */
  --radius-lg:   14px;
  --radius-card: 18px;

  --maxw: 1320px;

  /* -- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.55s;

  /* -- Chrome ------------------------------------------------------------ */
  --nav-h: 72px;
  --shadow-card: 0 24px 60px -24px rgba(0, 0, 0, 0.85);
  --shadow-glow: 0 0 0 1px rgba(0, 253, 146, 0.18),
                 0 30px 90px -40px rgba(0, 253, 146, 0.45);

  color-scheme: dark;
}

/* The page is a committed dark design; the light-on-green sections are an
   authored inversion rather than a theme. Keep the browser from re-tinting. */
@media (prefers-color-scheme: light) {
  :root { color-scheme: dark; }
}