/* ============================================================
   TOOXS DESIGN SYSTEM — colors_and_type.css
   ------------------------------------------------------------
   Single source of truth for color & type tokens.
   Import in your HTML:
     <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

/* ---------- Webfonts (Google Fonts) ---------- */
/* Tooxs.com uses a geometric, fully-rounded sans for the wordmark
   (very close to Nunito Black / Montserrat Rounded). For body and
   UI we approximate the WordPress site's Open Sans / system stack.
   FLAGGED: actual brand font files are not provided. Update fonts/
   and swap @font-face if Tooxs has a licensed brand face. */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Open+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ============================================================
     COLOR — Brand
     Sampled from the Tooxs isologo (color version).
     The logo uses two blues (deep navy strokes + brighter blue
     fills) on white. We keep both as canonical brand tokens.
     ============================================================ */
  --tx-blue-900: #0E2A47;   /* deepest stroke / navy */
  --tx-blue-800: #133E66;   /* deep brand blue */
  --tx-blue-700: #1A5687;   /* mid stroke */
  --tx-blue-600: #1F75B5;   /* PRIMARY — flat brand blue */
  --tx-blue-500: #2B8FD4;   /* bright fill */
  --tx-blue-400: #4FA8E0;   /* accent / hover */
  --tx-blue-300: #8FC8EC;   /* tint */
  --tx-blue-200: #C7E2F4;   /* surface tint */
  --tx-blue-100: #E6F1FA;   /* subtle wash */
  --tx-blue-050: #F4F9FD;   /* page wash */

  /* Brand semantic */
  --tx-brand:        var(--tx-blue-600);
  --tx-brand-deep:   var(--tx-blue-800);
  --tx-brand-bright: var(--tx-blue-500);

  /* Brand gradient — derived from the logo's stripe shading */
  --tx-brand-gradient: linear-gradient(135deg, #1F75B5 0%, #133E66 100%);
  --tx-brand-gradient-soft: linear-gradient(135deg, #E6F1FA 0%, #C7E2F4 100%);

  /* ============================================================
     COLOR — Neutrals
     The site pairs blue with crisp white surfaces and a near-black
     for body type. We use a slightly cool gray ramp.
     ============================================================ */
  --tx-ink-900: #0B1622;   /* near-black body */
  --tx-ink-800: #1A2331;
  --tx-ink-700: #2C3744;
  --tx-ink-600: #44505E;   /* secondary text */
  --tx-ink-500: #6B7785;   /* tertiary / placeholder */
  --tx-ink-400: #9AA3AF;   /* disabled */
  --tx-ink-300: #C8CED6;   /* dividers */
  --tx-ink-200: #E2E6EB;   /* borders */
  --tx-ink-100: #EFF2F5;   /* surface alt */
  --tx-ink-050: #F7F8FA;   /* page bg */
  --tx-white:   #FFFFFF;

  /* ============================================================
     COLOR — Semantic / status
     ============================================================ */
  --tx-success: #1FA971;
  --tx-success-bg: #E5F6EE;
  --tx-warning: #E3A008;
  --tx-warning-bg: #FBF3DC;
  --tx-danger:  #DC2A2A;
  --tx-danger-bg: #FCE6E6;
  --tx-info:    var(--tx-blue-500);
  --tx-info-bg: var(--tx-blue-100);

  /* ============================================================
     SEMANTIC ALIASES — use these in components
     ============================================================ */
  --bg-page:        var(--tx-white);
  --bg-page-alt:    var(--tx-ink-050);
  --bg-surface:     var(--tx-white);
  --bg-surface-alt: var(--tx-ink-100);
  --bg-inverse:     var(--tx-blue-900);

  --fg-1: var(--tx-ink-900); /* primary body text */
  --fg-2: var(--tx-ink-600); /* secondary */
  --fg-3: var(--tx-ink-500); /* tertiary */
  --fg-4: var(--tx-ink-400); /* disabled */
  --fg-on-brand: var(--tx-white);

  --border-1: var(--tx-ink-200);
  --border-2: var(--tx-ink-300);
  --border-strong: var(--tx-ink-700);
  --border-brand: var(--tx-blue-600);

  --link:        var(--tx-blue-600);
  --link-hover:  var(--tx-blue-800);
  --focus-ring:  rgba(31, 117, 181, 0.45);

  /* ============================================================
     TYPE — Families
     - Display/UI : Nunito (geometric humanist, fully rounded —
                    closest free match to the Tooxs wordmark).
     - Body       : Open Sans (matches tooxs.com WordPress theme).
     - Mono       : JetBrains Mono.
     ============================================================ */
  --font-display: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* TYPE — Sizes (1.250 major-third scale) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  38px;
  --fs-4xl:  48px;
  --fs-5xl:  60px;
  --fs-6xl:  76px;

  /* TYPE — Weight, line-height, tracking */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   900;

  --lh-tight:   1.10;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ============================================================
     RADII
     The Tooxs wordmark is fully rounded (no sharp corners). We
     mirror that with generous radii — pills for buttons, soft
     rounding on cards.
     ============================================================ */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-pill: 9999px;

  /* ============================================================
     SHADOWS — soft, low-spread (consultancy / enterprise vibe)
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(11, 22, 34, 0.05);
  --shadow-sm: 0 2px 6px rgba(11, 22, 34, 0.06), 0 1px 2px rgba(11, 22, 34, 0.04);
  --shadow-md: 0 6px 18px rgba(11, 22, 34, 0.08), 0 2px 4px rgba(11, 22, 34, 0.04);
  --shadow-lg: 0 18px 40px rgba(11, 22, 34, 0.12), 0 4px 10px rgba(11, 22, 34, 0.06);
  --shadow-brand: 0 12px 30px rgba(31, 117, 181, 0.28);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;
}

/* ============================================================
   BASE
   ============================================================ */
html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   SEMANTIC TYPE STYLES — use as utility classes or via @extend
   ============================================================ */

/* Display — heroes, marketing headlines. Nunito Black, tight. */
.tx-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.tx-h1, h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

.tx-h2, h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  margin: 0;
}

.tx-h3, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

.tx-h4, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

.tx-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--tx-brand);
}

.tx-lead {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.tx-body, p {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  margin: 0;
}

.tx-small, small {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.tx-caption {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg-3);
  letter-spacing: var(--tracking-wide);
}

.tx-mono, code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* Brand emphasis — used sparingly, e.g. in headlines.
   Mirrors the site's pattern of bolding key words inside H2s. */
.tx-emph {
  color: var(--tx-brand-deep);
  font-weight: var(--fw-black);
}

a, .tx-link {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover, .tx-link:hover { color: var(--link-hover); }

::selection { background: var(--tx-blue-200); color: var(--tx-blue-900); }