/* ───────────────────────────────────────────────────────────────────
   SimSMS — design tokens + minimal body reset.
   Crafted SaaS aesthetic: cool grey-violet palette (Linear-style, not
   stock Tailwind slate), multi-layer shadows, paper-grain noise on the
   boxed page, indigo accent with proper gleam, characterful radii.
   ─────────────────────────────────────────────────────────────────── */
:root{
  /* ── Surface — cool grey-violet, NOT stock slate ── */
  --page-bg:      #e8e8ee;   /* outside the box, slight cool-purple grey */
  --bg:           #f5f5fa;   /* sections inside the box */
  --bg2:          #ffffff;   /* card / header background */
  --bg3:          #edecf2;   /* hover */
  --bg4:          #d9d9e2;   /* deeper hover */
  --border:       #e0e0e8;   /* cool grey hairline (not slate-200) */
  --border-soft:  #ececf2;

  /* ── Text — slight cool-violet undertone, warmer than slate-900 ── */
  --text:         #14141a;
  --text2:        #4a4a55;
  --text3:        #8a8a95;

  /* ── Indigo accent (kept), refined variants ── */
  --accent:        #4f46e5;
  --accent2:       #4338ca;
  --accent3:       #312e81;
  --accent-bg:     #ecebff;   /* slightly violet-tinted to harmonize with greys */
  --accent-bg2:    #dfdcff;
  --accent-border: #c5c1f5;
  --accent-glow:   rgba(79,70,229,.22);

  /* ── Status ── */
  --red:    #b91c1c;
  --orange: #b45309;
  --green:  #047857;

  /* ── Mono ── */
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* ── Geometry — off-grid radii so cards don't look stock ── */
  --box-max:    1400px;
  --radius-sm:  5px;
  --radius:     10px;
  --radius-lg:  14px;
  --radius-pill:999px;

  /* ── Elevation — multi-layer crafted stack (not Tailwind shadow-md) ── */
  --shadow-card:    0 0 0 1px rgba(20,18,28,.04), 0 1px 0 rgba(20,18,28,.03), 0 1px 2px rgba(20,18,28,.04);
  --shadow-card-h:  0 0 0 1px rgba(79,70,229,.14), 0 18px 36px -16px rgba(20,18,28,.18), 0 4px 10px -3px rgba(20,18,28,.06);
  --shadow-box:     0 0 0 1px rgba(20,18,28,.05), 0 1px 0 rgba(20,18,28,.04), 0 24px 64px -32px rgba(20,18,28,.22), 0 8px 16px -8px rgba(20,18,28,.08);
  --shadow-float:   0 1px 0 rgba(20,18,28,.04), 0 8px 24px -8px rgba(20,18,28,.18), 0 16px 48px -16px rgba(20,18,28,.18);
  --shadow-pop:     0 1px 0 rgba(20,18,28,.04), 0 28px 72px -28px rgba(20,18,28,.34), 0 8px 16px -8px rgba(20,18,28,.12);
  --shadow-inset-t: inset 0 1px 0 rgba(255,255,255,.16);

  /* ── Gradients (primary CTA, accent fills) ── */
  --grad-primary:   linear-gradient(180deg, #5651e8 0%, #4f46e5 100%);
  --grad-primary-h: linear-gradient(180deg, #4e44d8 0%, #4338ca 100%);

  /* ── Paper-grain noise (tiny SVG noise filter, ~3% opacity) ── */
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .065 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  /* ── Page-wide indigo top strip thickness ── */
  --accent-strip: 3px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}

body{
  margin:0;
  background-color:var(--page-bg);
  background-image:var(--noise);
  color:var(--text);
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui,
    'Helvetica Neue', Arial, sans-serif;
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  border-top:var(--accent-strip) solid var(--accent);
  /* OpenType small caps for tabular numerals + slight stylistic alternate */
  font-feature-settings:"ss01","cv11","tnum" off;
}

img,svg,picture,video{display:block; max-width:100%; height:auto}
button{font:inherit; color:inherit}
a{color:inherit}

/* ── Boxed container — same noise overlay for paper feel inside the box ── */
.box{
  max-width:var(--box-max);
  margin:0 auto;
  background-color:var(--bg2);
  background-image:var(--noise);
  min-height:calc(100vh - var(--accent-strip));
  box-shadow:var(--shadow-box);
  position:relative;
  isolation:isolate;
}
@media (max-width:1100px){
  .box{box-shadow:none}
}

/* Inner padding utility */
.bxin{padding-left:clamp(16px,3vw,28px); padding-right:clamp(16px,3vw,28px)}

/* ── Crafted focus ring — indigo glow, not browser default ── */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}
button:focus-visible,
a:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--accent-glow), 0 0 0 1px var(--accent);
}

::selection{background:var(--accent); color:#fff}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}