/* ============================================================
   TURING WORKS — DESIGN FOUNDATIONS
   Colors + Type
   ============================================================
   Source: uploads/turing_works_colours.pdf (palette)
           uploads/lyka_people_proposal.pdf (applied usage)
   Font:   Inter Tight (user-specified)
   ============================================================ */

/* ---------- FONTS ----------
   Inter Tight — brand font, loaded from the local fonts/ directory.
   Full weight range 100–900 with matching italics. */

@font-face { font-family:'Inter Tight'; font-style:normal; font-weight:100; font-display:swap; src:url('../fonts/InterTight-Thin.ttf') format('truetype'); }
@font-face { font-family:'Inter Tight'; font-style:italic; font-weight:100; font-display:swap; src:url('../fonts/InterTight-ThinItalic.ttf') format('truetype'); }
@font-face { font-family:'Inter Tight'; font-style:normal; font-weight:200; font-display:swap; src:url('../fonts/InterTight-ExtraLight.ttf') format('truetype'); }
@font-face { font-family:'Inter Tight'; font-style:italic; font-weight:200; font-display:swap; src:url('../fonts/InterTight-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family:'Inter Tight'; font-style:normal; font-weight:300; font-display:swap; src:url('../fonts/InterTight-Light.ttf') format('truetype'); }
@font-face { font-family:'Inter Tight'; font-style:italic; font-weight:300; font-display:swap; src:url('../fonts/InterTight-LightItalic.ttf') format('truetype'); }
@font-face { font-family:'Inter Tight'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/InterTight-Regular.ttf') format('truetype'); }
@font-face { font-family:'Inter Tight'; font-style:italic; font-weight:400; font-display:swap; src:url('../fonts/InterTight-Italic.ttf') format('truetype'); }
@font-face { font-family:'Inter Tight'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/InterTight-Medium.ttf') format('truetype'); }
@font-face { font-family:'Inter Tight'; font-style:italic; font-weight:500; font-display:swap; src:url('../fonts/InterTight-MediumItalic.ttf') format('truetype'); }
@font-face { font-family:'Inter Tight'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/InterTight-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Inter Tight'; font-style:italic; font-weight:600; font-display:swap; src:url('../fonts/InterTight-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family:'Inter Tight'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/InterTight-Bold.ttf') format('truetype'); }
@font-face { font-family:'Inter Tight'; font-style:italic; font-weight:700; font-display:swap; src:url('../fonts/InterTight-BoldItalic.ttf') format('truetype'); }
@font-face { font-family:'Inter Tight'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/InterTight-ExtraBold.ttf') format('truetype'); }
@font-face { font-family:'Inter Tight'; font-style:italic; font-weight:800; font-display:swap; src:url('../fonts/InterTight-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family:'Inter Tight'; font-style:normal; font-weight:900; font-display:swap; src:url('../fonts/InterTight-Black.ttf') format('truetype'); }
@font-face { font-family:'Inter Tight'; font-style:italic; font-weight:900; font-display:swap; src:url('../fonts/InterTight-BlackItalic.ttf') format('truetype'); }

:root {
  /* =========================================================
     BASE PALETTE — Turing Works official colours (10 swatches)
     Ordered as they appear on the brand line, left → right:
     dark navy → mid teal → sage → warm cream
     ========================================================= */

  /* Deep navy family — primary brand anchor. Use for headings,
     main logo, text on light. navy-700 is the de-facto brand ink. */
  --tw-navy:     #072E45;   /* the one brand navy — everywhere navy is called for */
  --tw-navy-900: #072E45;   /* alias — prefer --tw-navy */
  --tw-navy-800: #072E45;   /* alias */
  --tw-navy-700: #072E45;   /* alias */
  --tw-navy-600: #072E45;   /* alias */
  --tw-navy-500: #072E45;   /* alias */

  /* Teal / sage — secondary. Use as data-viz hues, soft accents,
     illustrative fills on light backgrounds. */
  --tw-teal-500: #518C94;   /* mid teal */
  --tw-sage-300: #ADCFC9;   /* pale sage — backgrounds, chips */

  /* Warm sand family — the "human" side of the brand. Use for
     section backgrounds, quote blocks, cards, and to break up
     all-navy pages. */
  --tw-sand-500: #B8AD90;   /* khaki */
  --tw-sand-400: #CEC3A1;   /* sand */
  --tw-sand-200: #F7EACC;   /* cream — page background variant */

  /* ---------- HIGHLIGHT ----------
     Single warm accent. Use sparingly — flagged numbers, a key chip,
     one stop in the brand rule. Never for body text. */
  --tw-ember:    #D97757;
  --tw-ember-soft:#E8A87C;

  /* ---------- NEUTRALS (derived) ----------
     Light off-whites and greys to balance the navy + sand palette. */
  --tw-bg:        #FFFFFF;  /* page default */
  --tw-bg-tint:   #FBF6EA;  /* warm page tint — lighter than sand-200 */
  --tw-bg-cool:   #F4F6F7;  /* cool page tint */
  --tw-hairline:  #E6E2D6;  /* warm hairline on light */
  --tw-hairline-cool: #DDE3E6; /* cool hairline */
  --tw-mute-600:  #556773;  /* muted body text */
  --tw-mute-500:  #7C8A93;  /* captions, source lines */
  --tw-mute-400:  #A9B3B9;  /* disabled, footnote */

  /* ---------- SEMANTIC FOREGROUND / BACKGROUND ---------- */
  --fg-1: var(--tw-navy-900);  /* primary ink */
  --fg-2: var(--tw-navy-700);  /* secondary ink — headings / nav */
  --fg-3: var(--tw-mute-600);  /* body-muted, captions */
  --fg-4: var(--tw-mute-500);  /* source lines, meta */
  --fg-5: var(--tw-mute-400);  /* disabled */
  --fg-inverse: #FFFFFF;

  --bg-1: var(--tw-bg);                /* default page */
  --bg-2: var(--tw-bg-tint);           /* warm section */
  --bg-3: var(--tw-sand-200);          /* cream block */
  --bg-4: var(--tw-sage-300);          /* sage block */
  --bg-inverse: var(--tw-navy-900);    /* dark section */
  --bg-inverse-2: var(--tw-navy-700);  /* navy card on dark */

  /* ---------- ACCENT / LINK ---------- */
  --accent:        var(--tw-navy-700);
  --accent-hover:  var(--tw-navy-600);
  --accent-soft:   var(--tw-sage-300);

  /* ---------- BORDERS ---------- */
  --border-1: var(--tw-hairline);
  --border-2: var(--tw-hairline-cool);
  --border-strong: var(--tw-navy-900);

  /* ---------- DATA-VIZ SEQUENCE ----------
     Derived from the 10-stop brand line so visualisations feel
     on-brand. Use in this order for categorical series. */
  --viz-1: var(--tw-navy);
  --viz-2: var(--tw-teal-500);
  --viz-3: var(--tw-sage-300);
  --viz-4: var(--tw-sand-500);
  --viz-5: var(--tw-sand-400);
  --viz-6: var(--tw-sand-500);
  --viz-7: var(--tw-sand-400);
  --viz-8: var(--tw-sand-200);

  /* =========================================================
     TYPOGRAPHY
     Single family — Inter Tight — across display and text.
     A single typeface reinforces the clean consulting feel.
     ========================================================= */
  --font-sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;

  /* Type scale — optimised for deck + long-form. Uses a tight
     1.200 minor-third ratio at the top (for slide titles) and
     1.125 at the body end. */
  --fs-display: 64px;       /* hero / section opener */
  --fs-h1: 44px;            /* slide title */
  --fs-h2: 30px;            /* slide subtitle, page heading */
  --fs-h3: 22px;            /* column heading */
  --fs-h4: 18px;            /* eyebrow / card heading */
  --fs-body: 16px;          /* body copy */
  --fs-small: 14px;         /* captions */
  --fs-xs: 12px;            /* source line, footnote */
  --fs-eyebrow: 11px;       /* ALL CAPS labels */

  --lh-tight: 1.08;
  --lh-snug: 1.2;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  --ls-tight: -0.02em;      /* display */
  --ls-snug:  -0.01em;      /* headings */
  --ls-wide:  0.08em;       /* eyebrows */

  /* ---------- SPACING (4px grid) ---------- */
  --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;

  /* ---------- RADII ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 18px;    /* matches the tw_box logo's corner radius */
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---------- SHADOWS ----------
     Low-contrast, warm-toned. The brand is restrained; shadows
     are mostly absent — prefer hairline borders. Use sparingly. */
  --shadow-xs: 0 1px 2px rgba(7, 46, 69, 0.06);
  --shadow-sm: 0 2px 6px rgba(7, 46, 69, 0.08);
  --shadow-md: 0 6px 18px rgba(7, 46, 69, 0.10);
  --shadow-lg: 0 18px 40px rgba(7, 46, 69, 0.14);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
  --dur-slow: 420ms;
}

/* =========================================================
   SEMANTIC TYPE STYLES
   Use these classes (or reference the variables) anywhere
   you need standard heading / body treatment.
   ========================================================= */

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

.tw-display, h1.tw-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.tw-h1, h1 {
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  color: var(--fg-2);
}

.tw-h2, h2 {
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg-2);
}

.tw-h3, h3 {
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-2);
}

.tw-h4, h4 {
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-2);
}

.tw-body, p {
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.tw-body-muted {
  color: var(--fg-3);
}

.tw-small {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.tw-caption, figcaption {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg-4);
}

.tw-source {
  /* Consulting-deck "Source:" line — italic, muted, 11–12px */
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--fg-4);
}

.tw-eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-3);
}

/* =========================================================
   DECK-SPECIFIC ATOMS (mirror the Lyka proposal layout)
   ========================================================= */

.tw-section-chip {
  /* The numbered chip in the top-right of every slide: a small
     square with a bold number inside. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--fg-2);
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 16px;
  color: var(--fg-2);
  background: transparent;
}

.tw-agenda-arrow::before {
  /* Single-angle quote → used as an agenda bullet. */
  content: "›";
  display: inline-block;
  margin-right: var(--sp-3);
  color: var(--fg-2);
  font-weight: 700;
}

.tw-source-rule {
  border-top: 1px solid var(--border-1);
  padding-top: var(--sp-3);
  margin-top: var(--sp-6);
}

/* Buttons */
.tw-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 18px;
  border-radius: var(--r-md);
  font-family: inherit;
  font-weight: 600;
  font-size: var(--fs-small);
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  border: 1px solid transparent;
}
.tw-btn-primary {
  background: var(--tw-navy-700);
  color: var(--fg-inverse);
}
.tw-btn-primary:hover { background: var(--tw-navy-600); }
.tw-btn-secondary {
  background: transparent;
  color: var(--tw-navy-700);
  border-color: var(--tw-navy-700);
}
.tw-btn-secondary:hover { background: var(--tw-navy-700); color: var(--fg-inverse); }
.tw-btn-ghost {
  background: transparent;
  color: var(--tw-navy-700);
}
.tw-btn-ghost:hover { background: var(--bg-2); }

/* Chips / tags */
.tw-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--tw-sand-200);
  color: var(--tw-navy-900);
}
.tw-chip-sage { background: var(--tw-sage-300); color: var(--tw-navy-900); }
.tw-chip-navy { background: var(--tw-navy-900); color: var(--fg-inverse); }
.tw-chip-outline {
  background: transparent;
  border: 1px solid var(--border-1);
  color: var(--fg-2);
}

/* Card */
.tw-card {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.tw-card-cream { background: var(--tw-sand-200); border-color: transparent; }
.tw-card-sage  { background: var(--tw-sage-300); border-color: transparent; }
.tw-card-navy  {
  background: var(--tw-navy-900);
  color: var(--fg-inverse);
  border-color: transparent;
}
.tw-card-navy h1, .tw-card-navy h2, .tw-card-navy h3, .tw-card-navy h4 {
  color: var(--fg-inverse);
}