/* ============================================================
   Screens CMS — design tokens
   Themed to tm:rw (Smartech Retail Group — Home of Innovation).
   Monochromatic. Ink + Bone. Hairline borders. Radii 2–4px.
   No gradients. No shadows (except the floating drawer).
   ============================================================ */

/* ── Brand typeface — PP Neue Montreal (400 / 500 / 600 / 700) ── */
@font-face {
  font-family: 'PP Neue Montreal';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/PPNeueMontreal-Regular.woff2') format('woff2'),
       url('../fonts/PPNeueMontreal-Regular.woff')  format('woff');
}
@font-face {
  font-family: 'PP Neue Montreal';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/PPNeueMontreal-Regular.woff2') format('woff2'),
       url('../fonts/PPNeueMontreal-Regular.woff')  format('woff');
}
@font-face {
  font-family: 'PP Neue Montreal';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/PPNeueMontreal-Bold.woff2') format('woff2'),
       url('../fonts/PPNeueMontreal-Bold.woff')  format('woff');
}
@font-face {
  font-family: 'PP Neue Montreal';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/PPNeueMontreal-Bold.woff2') format('woff2'),
       url('../fonts/PPNeueMontreal-Bold.woff')  format('woff');
}

:root {
  /* Type */
  --font-sans: 'PP Neue Montreal', 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'PP Neue Montreal', 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* ── Ink (brand black, slightly warm) → Bone (paper-warm off-white) ──
     Existing components reference --ink-0 … --ink-10. We keep those names
     and re-map them to tm:rw's scale so every surface inherits the brand
     palette without touching component code.                               */
  --ink-0:  #141414;  /* primary brand black                      */
  --ink-1:  #1F1F1F;  /* headings / secondary surface on dark     */
  --ink-2:  #2F2E2A;  /* body                                     */
  --ink-3:  #4A4843;  /* secondary body                           */
  --ink-4:  #6E6B62;  /* tertiary / meta                          */
  --ink-5:  #9A968A;  /* muted                                    */
  --ink-6:  #C9C4B6;  /* strong border                            */
  --ink-7:  #D4CFC0;  /* divider                                  */
  --ink-8:  #E2DED3;  /* hairline / raised hover                  */
  --ink-9:  #EFEDE6;  /* bone-soft — sunken surface               */
  --ink-10: #F7F6F2;  /* bone — default page bg                   */

  /* Brand aliases (use directly where the tm:rw name matters) */
  --ink:        #141414;
  --ink-soft:   #1F1F1F;
  --bone:       #F7F6F2;
  --bone-soft:  #EFEDE6;
  --bone-line:  #E2DED3;
  --paper:      #FFFFFF;

  /* Accent — brand is monochrome-first. Primary buttons use Ink. */
  --accent:       var(--ink);
  --accent-hover: #2F2E2A;
  --on-accent:    var(--bone);

  /* Restrained accents from the tm:rw kit — one per surface, never stacked */
  --accent-amber:    #E8A33D;
  --accent-electric: #2D5BFF;
  --accent-signal:   #E6FF3A;
  --accent-clay:     #C8674A;
  --accent-mint:     #B8E6D2;

  /* Semantic — tuned warmer to match Bone surfaces */
  --ok:      #2F6B3B;
  --ok-bg:   #E4EFDD;
  --ok-dot:  #3D8C4B;

  --warn:    #8A5A12;
  --warn-bg: #F6E9C6;
  --warn-dot: var(--accent-amber);

  --err:     #A63824;
  --err-bg:  #F5DAD0;
  --err-dot: var(--accent-clay);

  --info:    #1E3FB8;
  --info-bg: #DBE2FA;

  /* Borders — hairline, Ink-tinted */
  --border:        1px solid var(--bone-line);
  --border-strong: 1px solid #D4CFC0;
  --border-faint:  1px solid #ECE8DC;

  /* Radii — tm:rw is near-rectilinear. 2 / 4 / 8 + pill.
     (The prior 12/16 radii collapse to 8 — keeps card geometry intact
     without drifting into SaaS rounded-rect.)                           */
  --r-xs:   2px;
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   4px;
  --r-xl:   8px;
  --r-pill: 999px;

  /* Shadows — almost never used. Drawer overlay only. */
  --shadow-0: none;
  --shadow-1: 0 1px 0 0 rgba(20,20,20,0.06);
  --shadow-2: 0 2px 8px -2px rgba(20,20,20,0.12);
  --shadow-3: 0 12px 32px -8px rgba(20,20,20,0.18);

  /* Layout */
  --sidebar-w: 232px;
  --header-h:  56px;

  /* Type scale — keeps existing component refs; slightly tighter. */
  --t-xs:      11px;
  --t-sm:      12px;
  --t-base:    13px;
  --t-md:      14px;
  --t-lg:      16px;
  --t-xl:      20px;
  --t-2xl:     24px;
  --t-3xl:     28px;
  --t-display: 32px;

  /* Tracking presets (for display text) */
  --tracking-hero: -0.04em;
  --tracking-h1:   -0.03em;
  --tracking-h2:   -0.02em;
  --tracking-body: -0.005em;
  --tracking-caps:  0.08em;

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* Dark — uses Ink as default and inverts toward Bone */
[data-theme="dark"] {
  --ink-0:  #F7F6F2;
  --ink-1:  #EFEDE6;
  --ink-2:  #E2DED3;
  --ink-3:  #C9C4B6;
  --ink-4:  #9A968A;
  --ink-5:  #6E6B62;
  --ink-6:  #4A4843;
  --ink-7:  #2F2E2A;
  --ink-8:  #252522;
  --ink-9:  #1A1A19;
  --ink-10: #141414;

  /* Bone tokens flip too — `var(--bone)` semantically means "page bg",
     and the sidebar reads it directly. Without these the sidebar would
     stay light while the rest of the app went dark. */
  --bone:       #141414;
  --bone-soft:  #1A1A19;
  --bone-line:  rgba(247, 246, 242, 0.08);
  --paper:      #1F1F1F;

  --accent:       #F7F6F2;
  --accent-hover: var(--ink-8);
  --on-accent:    #141414;

  --border:        1px solid rgba(247, 246, 242, 0.08);
  --border-strong: 1px solid rgba(247, 246, 242, 0.16);
  --border-faint:  1px solid rgba(247, 246, 242, 0.05);

  --ok:  #88C28F; --ok-bg:  rgba(61, 140, 75, 0.18);
  --warn: #E8A33D; --warn-bg: rgba(232, 163, 61, 0.16);
  --err: #E28770; --err-bg:  rgba(200, 103, 74, 0.2);
  --info: #8FA6F5; --info-bg: rgba(45, 91, 255, 0.18);
}

/* Base inside artboards */
html, body { background: var(--bone); }

.scr {
  font-family: var(--font-sans);
  color: var(--ink-2);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11', 'tnum' 0;
  background: var(--ink-10);
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.scr *, .scr *::before, .scr *::after { box-sizing: border-box; }
.scr button { font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
.scr input, .scr select, .scr textarea { font: inherit; color: inherit; }
.scr h1, .scr h2, .scr h3, .scr h4 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-h2); }
.scr p { margin: 0; font-weight: 400; }
.scr a { color: inherit; text-decoration: none; }
.scr ul, .scr ol { margin: 0; padding: 0; list-style: none; }
.scr img, .scr svg { display: block; max-width: 100%; }

.tnum { font-variant-numeric: tabular-nums; }

/* Eyebrow utility — tm:rw signature */
.eyebrow {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-4);
}

/* Thumbnail placeholder — warm paper texture, not SaaS gradient */
.placeholder-tile {
  background-color: var(--ink-9);
  background-image:
    radial-gradient(circle at 30% 20%, rgba(20,20,20,0.05) 0, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(20,20,20,0.06) 0, transparent 55%);
  position: relative;
  overflow: hidden;
}
.placeholder-tile::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(135deg, transparent 49.5%, rgba(20,20,20,0.04) 49.5%, rgba(20,20,20,0.04) 50.5%, transparent 50.5%);
  background-size: 8px 8px;
  opacity: 0.5;
}