/* inbs/2026 — the business-card identity of Insight Base's daughter
   company. Dark by construction: the logotype is white with the teal
   mark and has no dark-on-light variant, so the theme commits to the
   surface the logo was drawn for. Every ratio quoted below is measured
   (tools: scratchpad contrast script, WCAG 2.1 relative luminance).

   The licensed face is Industry, served by Adobe Fonts — the same kit
   ingrade uses, and THE SAME RULES APPLY: it may not be self-hosted,
   the kit is domain-locked, and `font-display` lives in the kit, not
   here. The full story, costs included, is written at the head of
   clients/ingrade/2026/theme.css; read it before touching this import. */
@import url("https://use.typekit.net/zay0cfm.css");

/* Inter stays behind Industry as the fallback that can render Czech
   before the kit arrives — self-hosted, same files as ingrade carries. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/clients/inbs/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201D, U+2026;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/clients/inbs/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF;
}

:root {
  /* The browser's own chrome — caret, autofill, native lists — follows
     the page instead of opening white over near-black. */
  --color-scheme: dark;

  /* ------------------------------------------------------------------
     COLOR — the brand teal #21CFB2, ramp ordered by role. As in every
     dark theme here, 700 sits ABOVE 600 in lightness: darkening the
     brand under the pointer reads as the light going out (see the
     theme-template's note, learned on ingrade).
     ------------------------------------------------------------------ */
  --color-primary-50:  #ecfdf9;
  --color-primary-100: #d0f9ef;
  --color-primary-200: #a4f1e0;
  --color-primary-300: #6fe6cd;
  --color-primary-400: #43dbc0;
  --color-primary-500: #2dd5b8;
  --color-primary-600: #21cfb2;   /* the brand — 9.70 on the page */
  --color-primary-700: #4addc4;   /* hover surface — brighter, not darker */
  --color-primary-800: #0d6b5b;   /* ink on the 100 chip — 5.65 */
  --color-primary-900: #07403a;   /* ink on the 200 chip — 9.00; scrim base */

  --color-primary: var(--color-primary-600);

  /* One-colour brand: the secondary follows the primary, per the
     template's own instruction, and nothing needs a special case. */
  --color-secondary: var(--color-primary-600);
  --color-secondary-strong: #0b5f51;   /* 6.67 on the 100 chip, 7.21 on 50 */

  /* Surfaces — near-black with a teal cast, not pure black: the glass
     card and the ambient glow both need a page a shade lighter than
     their darkest stop, or they have nothing to sit against. */
  --color-surface:         #071110;
  --color-surface-alt:     #0c1917;
  --color-surface-inverse: #040a09;

  --color-text:            #eef7f4;   /* 17.55 / 16.49 on the surfaces */
  --color-text-muted:      #93aca6;   /* 7.93 / 7.45 */
  --color-text-on-primary: #04241e;   /* 8.33 on 600, 9.74 on the 700 hover */
  --color-text-on-inverse: #eef7f4;

  --color-border: #1c2f2b;

  /* Feedback states, tuned for the dark page the way ingrade's are:
     translucent-dark softs, light strong inks, near-black labels on the
     solid base. Strong-on-soft measured 9.2–10.3, on-on-base 6.2–8.9,
     base-on-surface 6.1–9.1. */
  --color-success:        #46c98a;
  --color-success-soft:   #0d241a;
  --color-success-strong: #86dfb2;
  --color-success-on:     #05150d;

  --color-warning:        #d99a2b;
  --color-warning-soft:   #281d0a;
  --color-warning-strong: #f0c274;
  --color-warning-on:     #1a1203;

  --color-error:          #ef655c;
  --color-error-soft:     #2b1211;
  --color-error-strong:   #ffa49c;
  --color-error-on:       #1c0605;

  --color-info:           #4fb3d9;
  --color-info-soft:      #0d222b;
  --color-info-strong:    #92d3ec;
  --color-info-on:        #06141a;

  /* ------------------------------------------------------------------
     TYPOGRAPHY — Industry everywhere, and every number below is
     ingrade's measured finding for this exact face, inherited rather
     than rediscovered: 600 headings (700 clots at display sizes),
     positive tracking (the face reads compressed at any negative
     value), and the 0.02em body that buys the paragraph back.
     ------------------------------------------------------------------ */
  --font-heading: "industry", "Inter", system-ui, sans-serif;
  --font-body:    "industry", "Inter", system-ui, sans-serif;
  --font-button:  var(--font-body);

  --font-weight-heading: 600;
  --font-weight-body:    400;
  --font-weight-bold:    600;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --text-xl:   clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 1.25rem + 1.4vw, 2rem);
  --text-3xl:  clamp(1.875rem, 1.4rem + 2.4vw, 2.75rem);
  --text-4xl:  clamp(2.5rem, 1.6rem + 4.2vw, 4.5rem);
  --text-5xl:  clamp(2.75rem, 1.75rem + 4.4vw, 5rem);

  --leading-tight:   1.2;
  --leading-normal:  1.6;
  --leading-display: 1.04;

  --tracking-tight:   0.005em;
  --tracking-display: 0.01em;
  --tracking-body:    0.02em;

  /* ------------------------------------------------------------------
     SHAPE — sharp. The mark is a hard rectangle with a slot cut out of
     it; a rounded corner anywhere on the page would be arguing with
     the logo. Panels keep a small inset radius so a full-bleed slab
     still reads as placed, not broken.
     ------------------------------------------------------------------ */
  --radius-sm:   0px;
  --radius-md:   0px;
  --radius-lg:   0px;
  --radius-xl:   0px;
  --radius-full: 999px;
  --radius-panel: 0px;

  --border-width: 1px;

  /* ------------------------------------------------------------------
     SPACE
     ------------------------------------------------------------------ */
  --space-unit: 0.25rem;
  --section-space: clamp(3.5rem, 1.75rem + 5.5vw, 8rem);
  --container-max: 75rem;

  /* Shadows — a dark page needs opaque black at low spread or nothing
     reads; ingrade's measured pairs. */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.45);
  --shadow-md: 0 2px 6px rgb(0 0 0 / 0.45), 0 8px 20px rgb(0 0 0 / 0.40);
  --shadow-lg: 0 4px 12px rgb(0 0 0 / 0.45), 0 20px 48px rgb(0 0 0 / 0.55);

  /* ------------------------------------------------------------------
     MOTION — restrained: a business card is read in one glance, and
     the entrance should be over before the reader notices it began.
     ------------------------------------------------------------------ */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring:    cubic-bezier(0.34, 1.4, 0.64, 1);
  --motion-easing:  var(--ease-out-expo);

  --motion-duration:      200ms;
  --motion-duration-slow: 400ms;

  --reveal-duration:      600ms;
  --reveal-duration-slow: 800ms;
  --reveal-distance:       16px;
  --reveal-stagger:        70ms;
  --reveal-stagger-group:  70ms;
  --reveal-stagger-line:  100ms;

  /* ------------------------------------------------------------------
     PREMIUM LAYER — glass cards with a teal hairline, and a focus ring
     that answers in the brand. Everything else stays off.
     ------------------------------------------------------------------ */
  --card-surface: rgb(255 255 255 / 0.03);
  --card-border: rgb(33 207 178 / 0.14);
  --card-border-hover: rgb(33 207 178 / 0.32);
  --card-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), var(--shadow-lg);

  --field-focus-ring: 0 0 0 2px rgb(33 207 178 / 0.38), 0 0 18px rgb(33 207 178 / 0.18);

  /* UI labels — Industry's optical corrections, ingrade's measurements. */
  --leading-ui: 1.5;
  --label-ink-shift: 0.13em;
  --btn-label-shift: 0.075em;
  --btn-line-height: 1.25;
}