/* ColdWorks case study - preview mockup styles (BBCS-05)
   Scoped to .cs-cw so nothing leaks onto the host page.
   Tokens rescoped from the ColdWorks design system onto the mockup canvas. */

/* ============ Fonts (self-hosted) ============ */
@font-face {
  font-family: 'Cantarell';
  src: url('/assets/fonts/Cantarell-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cantarell';
  src: url('/assets/fonts/Cantarell-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ============ Preview fit infrastructure ============ */
.cs-cw .nw-preview{display:block;width:100%;background:transparent}
.cs-cw .nw-fit{position:relative;width:100%;overflow:hidden}
.cs-cw .nw-canvas{position:absolute;top:0;left:0;transform-origin:0 0;transform:scale(var(--nw-scale,1));color:#000;font-family:'Cantarell',system-ui,sans-serif;letter-spacing:normal}
.cs-cw .nw-tier{display:none}
@media (min-width:1024px){.cs-cw .nw-tier--desktop{display:block}}
@media (min-width:768px) and (max-width:1023.98px){.cs-cw .nw-tier--tablet{display:block}}
@media (max-width:767.98px){.cs-cw .nw-tier--mobile{display:block}}

/* ============ Host isolation: block global.css element styling ============ */
.cs-cw .nw-preview header,.cs-cw .nw-preview nav,.cs-cw .nw-preview section,.cs-cw .nw-preview article,.cs-cw .nw-preview aside,.cs-cw .nw-preview main,.cs-cw .nw-preview footer{position:static;inset:auto;z-index:auto;width:auto;height:auto;background:none;border:none;padding:0;margin:0;display:block}
.cs-cw .nw-preview h1,.cs-cw .nw-preview h2,.cs-cw .nw-preview h3,.cs-cw .nw-preview h4,.cs-cw .nw-preview h5,.cs-cw .nw-preview h6{margin:0;font-family:'Cantarell',system-ui,sans-serif;font-weight:700;line-height:1.2;letter-spacing:normal;text-transform:none;color:inherit}
.cs-cw .nw-preview p{margin:0;max-width:none;color:inherit}
.cs-cw .nw-preview a{color:#333333;text-decoration:none}
.cs-cw .nw-preview *,.cs-cw .nw-preview *::before,.cs-cw .nw-preview *::after{box-sizing:border-box}

/* ============ Design tokens (rescoped to the canvas) ============ */
.cs-cw .nw-canvas {
  --cw-white:      #ffffff;
  --cw-slate-50:   #f5f5f5;   /* app background */
  --cw-slate-100:  #f9f9f9;   /* sunken fills, zebra rows, tickets */
  --cw-slate-150:  #efefef;   /* hover fills */
  --cw-slate-200:  #eeeeee;   /* internal hairlines */
  --cw-slate-300:  #dddddd;   /* card borders, dividers */
  --cw-slate-400:  #cccccc;   /* disabled text, faint icons */
  --cw-slate-500:  #999999;   /* muted text, light status */
  --cw-slate-600:  #666666;   /* secondary text, mid status */
  --cw-slate-700:  #555555;   /* hover state on dark blocks */
  --cw-slate-800:  #444444;   /* dividers on dark */
  --cw-slate-900:  #333333;   /* ink + dark blocks */
  --cw-brand-50:   #f5f5f5;
  --cw-brand-100:  #eeeeee;
  --cw-brand-200:  #dddddd;
  --cw-brand-300:  #cccccc;
  --cw-brand-400:  #555555;
  --cw-brand-500:  #444444;
  --cw-brand-600:  #333333;   /* primary */
  --cw-brand-700:  #555555;   /* primary hover - lightens, per prototype */
  --cw-brand-800:  #333333;
  --cw-green-50:   #f9f9f9;
  --cw-green-100:  #eeeeee;
  --cw-green-200:  #dddddd;
  --cw-green-600:  #333333;
  --cw-green-700:  #333333;
  --cw-amber-50:   #fff8e6;   /* cream note tint - the one non-grey */
  --cw-amber-100:  #f6eecd;
  --cw-amber-600:  #999999;
  --cw-amber-700:  #666666;
  --cw-red-50:     #f5f5f5;
  --cw-red-100:    #e8e8e8;
  --cw-red-600:    #666666;
  --cw-red-700:    #444444;
  --cw-info-50:    var(--cw-brand-50);
  --cw-info-100:   var(--cw-brand-100);
  --cw-info-600:   var(--cw-brand-600);
  --cw-info-700:   var(--cw-brand-700);
  --surface-page:        var(--cw-slate-50);
  --surface-card:        var(--cw-white);
  --surface-sunken:      var(--cw-slate-100);
  --surface-raised:      var(--cw-white);
  --surface-inverse:     var(--cw-slate-900);
  --surface-hover:       var(--cw-slate-100);
  --border-subtle:       var(--cw-slate-300);   /* #ddd - card borders */
  --border-default:      var(--cw-slate-300);
  --border-strong:       var(--cw-slate-900);   /* #333 - checkboxes, outlines */
  --border-focus:        var(--cw-slate-900);
  --text-primary:        var(--cw-slate-900);
  --text-secondary:      var(--cw-slate-600);
  --text-muted:          var(--cw-slate-500);
  --text-disabled:       var(--cw-slate-400);
  --text-on-brand:       var(--cw-white);
  --text-on-inverse:     #ffffff;
  --text-link:           var(--cw-slate-900);
  --brand:               var(--cw-brand-600);
  --brand-hover:         var(--cw-brand-700);
  --brand-tint:          var(--cw-brand-50);
  --focus-ring:          0 0 0 3px rgba(51, 51, 51, 0.22);
  --font-display: "Cantarell", system-ui, sans-serif;
  --font-sans:    "Cantarell", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fs-2xs:   11px;   /* micro labels, table meta */
  --fs-xs:    12px;   /* captions, badges, dense UI */
  --fs-sm:    13px;   /* secondary UI, table cells */
  --fs-base:  14px;   /* body / default UI */
  --fs-md:    15px;
  --fs-lg:    17px;   /* card titles */
  --fs-xl:    20px;   /* section headings */
  --fs-2xl:   24px;   /* page titles */
  --fs-3xl:   30px;   /* stat values */
  --fs-4xl:   40px;   /* big display */
  --fs-5xl:   56px;   /* hero display */
  --lh-tight:   1.1;    /* @kind font */
  --lh-snug:    1.28;   /* @kind font */
  --lh-normal:  1.5;    /* @kind font */
  --lh-relaxed: 1.65;   /* @kind font */
  --fw-regular:  400;   /* @kind font */
  --fw-medium:   700;   /* @kind font */
  --fw-semibold: 700;   /* @kind font */
  --fw-bold:     700;   /* @kind font */
  --tracking-tight:  0;
  --tracking-snug:   0;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;   /* uppercase eyebrow labels */
  --numeric: "tnum" 1, "lnum" 1;   /* @kind other */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --radius-xs:   0;
  --radius-sm:   0;    /* buttons, inputs, badges */
  --radius-md:   0;    /* cards, tickets */
  --radius-lg:   0;    /* panels, modals */
  --radius-xl:   0;
  --radius-full: 999px; /* status dots only */
  --shadow-xs:  none;
  --shadow-sm:  none;
  --shadow-md:  none;
  --shadow-lg:  none;
  --shadow-focus: var(--focus-ring);
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);    /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --dur-fast:   120ms;   /* @kind other */
  --dur-base:   180ms;   /* @kind other */
  --dur-slow:   260ms;   /* @kind other */
  --sidebar-w:      248px;
  --header-h:       0px;
  --content-max:    1440px;
  --border-hair:    1px;   /* @kind other */
}

/* Screen-level colour overrides: real green positive, red negative (after tokens for cascade) */
.cs-cw .nw-canvas {
  --cw-green-50:#e9f3ec; --cw-green-100:#d2e7d9; --cw-green-200:#b3d6c0;
  --cw-green-600:#2e7d4f; --cw-green-700:#256540;
  --cw-red-50:#faeceb; --cw-red-100:#f4d6d3;
  --cw-red-600:#c0392b; --cw-red-700:#9e2d22;
  --cw-amber-600:#c0392b; --cw-amber-700:#9e2d22;
  --cw-amber-50:#faeceb; --cw-amber-100:#f4d6d3;
}

/* ============ Design system utilities (rescoped + renamed) ============ */
.cs-cw .cw-tnum{font-feature-settings:var(--numeric);font-variant-numeric:tabular-nums lining-nums}
.cs-cw .cw-mono{font-family:var(--font-mono);font-feature-settings:var(--numeric)}
.cs-cw .cw-display{font-family:var(--font-display);letter-spacing:var(--tracking-tight)}
.cs-cw .cw-icon > svg{width:100%;height:100%;display:block}
.cs-cw .cw-eyebrow{font-family:var(--font-sans);font-size:var(--fs-2xs);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted)}
.cs-cw ::selection{background:var(--cw-slate-300);color:var(--cw-slate-900)}

/* ============ Screen-level utilities ============ */
.cs-cw .nw-canvas .hscroll{overflow-x:auto;scrollbar-width:none}
.cs-cw .nw-canvas .hscroll::-webkit-scrollbar{display:none}
.cs-cw .nw-canvas .dhs{display:inline-block;width:.74em;height:.63em;background:url('/case-studies/coldworks/assets/dirham-symbol.webp') center/contain no-repeat;margin-right:.16em}
.cs-cw .nw-canvas .hatch{background-image:repeating-linear-gradient(45deg,#e9e9e9 0,#e9e9e9 1px,#f4f4f4 1px,#f4f4f4 10px)}

/* ============ Audio guide wiring ============ */
.cs-cw .cw-audio-el{display:none}
.cs-cw .cw-audio-btn{user-select:none;-webkit-user-select:none}
.cs-cw .cw-audio-btn:focus-visible{outline:2px solid var(--cw-brand-500,#2e7d4f);outline-offset:2px}
.cs-cw .cw-audio.is-playing .cw-audio-play{display:none !important}
.cs-cw .cw-audio.is-playing .cw-audio-pause{display:block !important}
.cs-cw .cw-audio-fill{transition:width .2s linear}
@media (hover:hover){
  .cs-cw .cw-audio-btn:hover{opacity:.85;cursor:pointer}
  .cs-cw .cw-audio-track:hover{cursor:pointer}
}

/* ============ Motion ============ */
@media (prefers-reduced-motion:reduce){
  .cs-cw .nw-canvas *,.cs-cw .nw-canvas *::before,.cs-cw .nw-canvas *::after{animation:none !important;transition:none !important}
  .cs-cw .cw-audio-fill{transition:none}
}