/* ============================================================================
   CineScale — tokens.css (app copy of colors_and_type.css)
   Source of truth: CineScale Brand Kit/tokens/colors_and_type.css
   Font paths adapted to /assets/fonts. Times New Roman falls back to the
   system serif until the studio TTFs are dropped in (see brand kit README).
   ============================================================================ */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");

@font-face {
  font-family: "Nunito Sans";
  src: url("../assets/fonts/NunitoSans.ttf") format("truetype");
  font-weight: 200 900; font-style: normal; font-display: swap;
}

:root {
  --cs-ink:   #141414;
  --cs-cream: #EFEAE0;
  --cs-paper: #F6F2EA;

  --cs-cream-95: #E5E0D6;
  --cs-cream-80: #C2BDB4;
  --cs-cream-60: #918D85;
  --cs-cream-40: #5F5C57;
  --cs-cream-20: #2E2C29;
  --cs-cream-10: #1F1E1C;

  --cs-bg:           var(--cs-ink);
  --cs-bg-elev:      var(--cs-cream-10);
  --cs-bg-elev-2:    var(--cs-cream-20);
  --cs-fg:           var(--cs-cream);
  --cs-fg-muted:     var(--cs-cream-80);
  --cs-fg-subtle:    var(--cs-cream-60);
  --cs-border:       var(--cs-cream-40);
  --cs-border-faint: var(--cs-cream-20);
  --cs-accent:       var(--cs-cream);
  --cs-focus-ring:   var(--cs-cream);

  --cs-bg-light:          var(--cs-paper);
  --cs-bg-light-2:        var(--cs-cream);
  --cs-fg-on-light:       var(--cs-ink);
  --cs-fg-muted-light:    #4A4842;
  --cs-border-on-light:   #D6D0C2;

  --cs-font-display: "Times New Roman", "Times", Georgia, serif;
  --cs-font-body:    "Nunito Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --cs-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;

  --cs-fs-d1:      120px;
  --cs-fs-d2:       88px;
  --cs-fs-d3:       64px;
  --cs-fs-h1:       48px;
  --cs-fs-h2:       36px;
  --cs-fs-h3:       28px;
  --cs-fs-h4:       22px;
  --cs-fs-h5:       18px;
  --cs-fs-lead:     20px;
  --cs-fs-body:     16px;
  --cs-fs-small:    14px;
  --cs-fs-caption:  12px;
  --cs-fs-micro:    11px;

  --cs-lh-display: 1.02;
  --cs-lh-heading: 1.12;
  --cs-lh-body:    1.55;
  --cs-lh-caption: 1.40;

  --cs-ls-display:    -0.02em;
  --cs-ls-heading:    -0.01em;
  --cs-ls-body:        0;
  --cs-ls-caps:        0.18em;
  --cs-ls-caps-tight:  0.08em;

  --cs-s-1:   4px;
  --cs-s-2:   8px;
  --cs-s-3:  12px;
  --cs-s-4:  16px;
  --cs-s-5:  24px;
  --cs-s-6:  32px;
  --cs-s-7:  48px;
  --cs-s-8:  64px;
  --cs-s-9:  96px;
  --cs-s-10: 128px;
  --cs-s-11: 192px;
  --cs-s-12: 256px;

  --cs-maxw:      1440px;
  --cs-gutter:    32px;
  --cs-gutter-sm: 20px;
  --cs-col-gap:   24px;

  --cs-radius-0:    0;
  --cs-radius-1:    2px;
  --cs-radius-2:    4px;
  --cs-radius-3:    10px;   /* cards you pick up — softer than the panels they sit in */
  --cs-radius-pill: 999px;

  --cs-border-w: 1px;
  --cs-hairline: 1px solid var(--cs-border-faint);

  --cs-shadow-0:   none;
  --cs-shadow-1:   0 1px 0 rgba(0,0,0,0.4);
  --cs-shadow-2:   0 12px 32px -12px rgba(0,0,0,0.55);
  --cs-shadow-pop: 0 32px 80px -24px rgba(0,0,0,0.65);

  --cs-ease-cine:  cubic-bezier(0.22, 1, 0.36, 1);
  --cs-ease-in:    cubic-bezier(0.6,  0, 0.85, 0.3);
  --cs-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --cs-dur-fast:    180ms;
  --cs-dur-base:    320ms;
  --cs-dur-slow:    640ms;
  --cs-dur-cine:   1200ms;
}

.cs-root {
  background: var(--cs-bg);
  color: var(--cs-fg);
  font-family: var(--cs-font-body);
  font-size: var(--cs-fs-body);
  line-height: var(--cs-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.cs-root.light {
  background: var(--cs-bg-light);
  color: var(--cs-fg-on-light);
}

.cs-display-1 { font-family: var(--cs-font-display); font-size: var(--cs-fs-d1); line-height: var(--cs-lh-display); font-weight: 400; font-style: italic; letter-spacing: var(--cs-ls-display); }
.cs-display-2 { font-family: var(--cs-font-display); font-size: var(--cs-fs-d2); line-height: var(--cs-lh-display); font-weight: 400; font-style: normal; letter-spacing: var(--cs-ls-display); }
.cs-display-3 { font-family: var(--cs-font-display); font-size: var(--cs-fs-d3); line-height: var(--cs-lh-heading); font-weight: 400; }

.cs-h1 { font-family: var(--cs-font-body); font-size: var(--cs-fs-h1); line-height: var(--cs-lh-heading); font-weight: 600; letter-spacing: var(--cs-ls-heading); }
.cs-h2 { font-family: var(--cs-font-body); font-size: var(--cs-fs-h2); line-height: var(--cs-lh-heading); font-weight: 600; letter-spacing: var(--cs-ls-heading); }
.cs-h3 { font-family: var(--cs-font-body); font-size: var(--cs-fs-h3); line-height: var(--cs-lh-heading); font-weight: 600; }
.cs-h4 { font-family: var(--cs-font-body); font-size: var(--cs-fs-h4); line-height: var(--cs-lh-heading); font-weight: 600; }
.cs-h5 { font-family: var(--cs-font-body); font-size: var(--cs-fs-h5); line-height: var(--cs-lh-heading); font-weight: 600; }

.cs-lead  { font-family: var(--cs-font-body); font-size: var(--cs-fs-lead);  line-height: var(--cs-lh-body); font-weight: 400; color: var(--cs-fg-muted); }
.cs-body  { font-family: var(--cs-font-body); font-size: var(--cs-fs-body);  line-height: var(--cs-lh-body); font-weight: 400; }
.cs-small { font-family: var(--cs-font-body); font-size: var(--cs-fs-small); line-height: var(--cs-lh-body); font-weight: 400; }

.cs-caption { font-family: var(--cs-font-mono); font-size: var(--cs-fs-caption); line-height: var(--cs-lh-caption); font-weight: 400; color: var(--cs-fg-subtle); }

.cs-eyebrow { font-family: var(--cs-font-body); font-size: var(--cs-fs-micro); line-height: 1; font-weight: 600; text-transform: uppercase; letter-spacing: var(--cs-ls-caps); }
.cs-tagline { font-family: var(--cs-font-body); font-weight: 600; text-transform: uppercase; letter-spacing: var(--cs-ls-caps); }