/* =============================================================
   Second Brain — Design Tokens
   colors_and_type.css

   Import this file at the top of any UI you build for this brand.
   All values are intentional. Don't override them inline.
   ============================================================= */

/* ----- Webfonts -----------------------------------------------
   Estedad — Persian + Latin sans (primary), loaded from Google Fonts.
   ----------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Estedad:wght@100..900&display=swap');

:root {
  /* ===== Color — paper + ink ===== */
  --paper:        #F8F9FA;   /* app background */
  --paper-2:      #F3F4F5;   /* secondary surface — section dividers */
  --surface:      #FFFFFF;   /* lifted card surface */
  --surface-2:    #EDEEEF;   /* nested card / inset row */
  --surface-glass: rgba(255, 255, 255, 0.74);

  --ink:          #191C1D;   /* primary text, near-black */
  --ink-2:        #3D4947;   /* secondary text, metadata */
  --ink-3:        #6D7A77;   /* placeholder, disabled, hairlines */
  --ink-4:        #BCC9C6;   /* faintest — dividers on paper */

  /* ===== Brand ===== */
  --firoozeh:        #2A9D8F;  /* teal — primary brand */
  --firoozeh-deep:   #006A60;  /* pressed, link hover */
  --firoozeh-soft:   #DDF3F0;  /* tinted backgrounds, focus halos */

  /* ===== Secondary accents ===== */
  --saffron:      #FFAC1F;     /* amber — warm accent */
  --saffron-soft: #FFF3D8;
  --garnet:       #B23A48;     /* destructive only */
  --garnet-soft:  #F1D6D9;
  --moss:         #5A7A3A;     /* success / completion */
  --moss-soft:    #DEE6CC;

  /* ===== Semantic shortcuts ===== */
  --fg:           var(--ink);
  --fg-2:         var(--ink-2);
  --fg-3:         var(--ink-3);
  --bg:           var(--paper);
  --bg-elev:      var(--surface);
  --accent:       var(--firoozeh);
  --danger:       var(--garnet);
  --success:      var(--moss);
  --warn:         var(--saffron);

  /* ===== Borders ===== */
  --hairline:     1px solid rgba(25, 28, 29, 0.08);
  --hairline-strong: 1px solid rgba(25, 28, 29, 0.16);
  --focus-ring:   0 0 0 2px var(--paper), 0 0 0 4px var(--firoozeh);

  /* ===== Adaptive border/surface colors (safe for inline styles) ===== */
  --c-border-xs:  rgba(25, 28, 29, 0.06);
  --c-border-sm:  rgba(25, 28, 29, 0.10);
  --c-border-md:  rgba(25, 28, 29, 0.16);
  --c-tint-xs:    rgba(25, 28, 29, 0.04);
  --c-tint-sm:    rgba(25, 28, 29, 0.08);
  --c-inactive:   rgba(25, 28, 29, 0.18);

  /* ===== Radii ===== */
  --r-sm:    10px;
  --r-md:    16px;
  --r-lg:    24px;
  --r-pill:  999px;

  /* ===== Shadows ===== */
  --shadow-lift:  0 1px 3px rgba(0, 0, 0, 0.04),
                  0 6px 15px rgba(0, 0, 0, 0.04);
  --shadow-float: 0 4px 20px rgba(42, 157, 143, 0.12),
                  0 16px 32px rgba(0, 0, 0, 0.08);
  --shadow-ink:   0 18px 48px rgba(25, 28, 29, 0.13);
  --shadow-press: inset 0 1px 0 rgba(255,255,255,0.50),
                  inset 0 -1px 0 rgba(25,28,29,0.06);

  /* ===== Inverted / hero surface — always dark in both themes ===== */
  --surface-invert:  var(--ink);          /* dark in light mode */
  --fg-on-invert:    var(--paper);        /* light text on dark hero */
  --label-on-invert: var(--firoozeh-soft); /* subtle label on dark hero */

  /* ===== Spacing ramp ===== */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;

  /* ===== Motion ===== */
  --ease-out:  cubic-bezier(0.20, 0.80, 0.20, 1.00);
  --ease-io:   cubic-bezier(0.40, 0.00, 0.20, 1.00);
  --dur-micro: 120ms;
  --dur-base:  240ms;
  --dur-route: 400ms;
  --dur-soft:  520ms;
  --dur-slow:  900ms;

  /* ===== Type — families ===== */
  --font-sans: 'Estedad', sans-serif;
  --font-mono: 'Estedad', sans-serif;

  /* ===== Type — scale (each variable carries size/line-height) ===== */
  --type-display:     600 40px/48px var(--font-sans);
  --type-h1:          600 28px/34px var(--font-sans);
  --type-h2:          600 22px/28px var(--font-sans);
  --type-h3:          500 18px/24px var(--font-sans);
  --type-body:        400 16px/24px var(--font-sans);
  --type-body-strong: 500 16px/24px var(--font-sans);
  --type-small:       400 14px/20px var(--font-sans);
  --type-micro:       500 12px/16px var(--font-sans);
  --type-mono:        400 14px/20px var(--font-mono);
}

/* Dark mode — opt in with [data-theme="dark"] on <html> or any ancestor.
   Inverts paper/ink; nudges the accent brighter to keep contrast. */
[data-theme="dark"] {
  --paper:     #161513;
  --paper-2:   #1E1C19;
  --surface:   #211F1B;
  --surface-2: #2A2722;
  --surface-glass: rgba(33, 31, 27, 0.74);

  --ink:    #E8E2D4;
  --ink-2:  #C4BDB0;   /* was #B0A99A — brighter for dark bg */
  --ink-3:  #9A9389;   /* was #7F786B — higher contrast on dark bg */
  --ink-4:  #514D48;   /* was #44403A — slightly more visible */

  --firoozeh:      #4DBFB3;
  --firoozeh-deep: #8FD8D2;
  --firoozeh-soft: #163E3B;   /* was #0D2624 — less black, visible on dark hero */

  /* Inverted surface stays dark in dark mode too */
  --surface-invert:  #1C2B29;          /* dark teal-tinted, not cream */
  --fg-on-invert:    var(--ink);        /* cream text on dark hero */
  --label-on-invert: var(--firoozeh);  /* teal label on dark hero */

  --saffron-soft:  #3A2800;
  --garnet-soft:   #3A1A1F;
  --moss-soft:     #1F2A14;

  --hairline:        1px solid rgba(232, 226, 212, 0.10);
  --hairline-strong: 1px solid rgba(232, 226, 212, 0.20);
  --focus-ring:      0 0 0 2px var(--paper), 0 0 0 4px var(--firoozeh);

  --c-border-xs:  rgba(232, 226, 212, 0.08);
  --c-border-sm:  rgba(232, 226, 212, 0.14);
  --c-border-md:  rgba(232, 226, 212, 0.22);
  --c-tint-xs:    rgba(232, 226, 212, 0.05);
  --c-tint-sm:    rgba(232, 226, 212, 0.10);
  --c-inactive:   rgba(232, 226, 212, 0.22);

  --shadow-lift:  0 1px 2px rgba(0,0,0,0.30), 0 4px 12px rgba(0,0,0,0.40);
  --shadow-float: 0 4px 12px rgba(0,0,0,0.40), 0 16px 32px rgba(0,0,0,0.45);
  --shadow-ink:   0 18px 48px rgba(0,0,0,0.38);
  --shadow-press: inset 0 1px 0 rgba(255,255,255,0.08),
                  inset 0 -1px 0 rgba(0,0,0,0.24);
}

/* =============================================================
   Element-level defaults

   Apply via:  <body class="sb">  or   <div class="sb">
   ============================================================= */
/* Hide scrollbars app-wide — keep scroll functionality, look native */
* {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge */
}
*::-webkit-scrollbar {
  display: none;                /* Chrome/Safari/WebKit */
}

.sb,
.sb * {
  box-sizing: border-box;
}

.sb {
  font: var(--type-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html,
body,
button,
input,
textarea,
select {
  font-family: var(--font-sans);
}

button,
input,
textarea,
select {
  letter-spacing: 0;
}

button {
  -webkit-tap-highlight-color: transparent;
}

/* Persian-first: any element inside .sb[dir="rtl"] flows RTL by default. */
.sb[dir="rtl"], .sb [dir="rtl"] { direction: rtl; }

/* Headings */
.sb h1, .sb .h1 { font: var(--type-h1); margin: 0; color: var(--fg); letter-spacing: 0; }
.sb h2, .sb .h2 { font: var(--type-h2); margin: 0; color: var(--fg); letter-spacing: 0; }
.sb h3, .sb .h3 { font: var(--type-h3); margin: 0; color: var(--fg); }
.sb .display     { font: var(--type-display); margin: 0; color: var(--fg); letter-spacing: 0; }

/* Body */
.sb p, .sb .body { font: var(--type-body); margin: 0; color: var(--fg); }
.sb .body-strong { font: var(--type-body-strong); color: var(--fg); }
.sb .small       { font: var(--type-small); color: var(--fg-2); }
.sb .micro       { font: var(--type-micro); color: var(--fg-2); letter-spacing: 0; }
.sb code, .sb .mono { font: var(--type-mono); color: var(--fg); }

/* Links */
.sb a {
  color: var(--firoozeh);
  text-decoration: none;
  border-bottom: 1px solid rgba(42, 157, 143, 0.32);
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.sb a:hover { color: var(--firoozeh-deep); border-bottom-color: var(--firoozeh-deep); }

/* Focus — keyboard only */
.sb :focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

/* Hairline divider */
.sb hr { border: 0; border-top: var(--hairline); margin: var(--s-5) 0; }

/* Selection */
.sb ::selection { background: var(--firoozeh-soft); color: var(--firoozeh-deep); }

/* =============================================================
   Reusable primitives — small, opinionated, ready to drop into UI
   ============================================================= */

/* Card */
.sb-card {
  background: var(--surface);
  border-radius: var(--r-md);
  border: var(--hairline);
  box-shadow: var(--shadow-lift);
  padding: var(--s-5);
}

/* Buttons */
.sb-btn {
  font: var(--type-body-strong);
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 10px 16px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: var(--ink); color: var(--paper);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.sb-btn:hover  { background: #2A2823; }
.sb-btn:active { transform: scale(0.98); }

.sb-btn--primary { background: var(--firoozeh); color: #fff; }
.sb-btn--primary:hover  { background: var(--firoozeh-deep); }

.sb-btn--ghost {
  background: transparent; color: var(--fg);
  border-color: rgba(27,26,23,0.16);
}
.sb-btn--ghost:hover { background: rgba(27,26,23,0.04); }

.sb-btn--danger { background: var(--garnet); color: #fff; }

/* Inputs */
.sb-input {
  font: var(--type-body);
  width: 100%;
  padding: 12px 14px;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid rgba(27,26,23,0.16);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-micro) var(--ease-out),
              box-shadow var(--dur-micro) var(--ease-out);
}
.sb-input::placeholder { color: var(--ink-3); }
.sb-input:focus { outline: none; border-color: var(--firoozeh); box-shadow: 0 0 0 3px var(--firoozeh-soft); }

/* Chip / tag */
.sb-chip {
  font: var(--type-micro);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  color: var(--ink-2);
  border: 1px solid rgba(27,26,23,0.06);
}
.sb-chip--accent  { background: var(--firoozeh-soft); color: var(--firoozeh-deep); border-color: transparent; }
.sb-chip--warn    { background: var(--saffron-soft); color: var(--saffron); border-color: transparent; }
.sb-chip--success { background: var(--moss-soft); color: var(--moss); border-color: transparent; }
.sb-chip--danger  { background: var(--garnet-soft); color: var(--garnet); border-color: transparent; }

/* =============================================================
   App atmosphere + motion
   ============================================================= */
.sb-shell {
  isolation: isolate;
  background-color: var(--paper);
}

.sb-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(135deg, rgba(42,157,143,0.08), transparent 34%),
    linear-gradient(315deg, rgba(255,172,31,0.10), transparent 28%),
    repeating-linear-gradient(90deg, rgba(25,28,29,0.018) 0 1px, transparent 1px 32px);
}

.sb-surface {
  background: var(--surface-glass);
  border: 1px solid var(--c-border-xs);
  box-shadow: var(--shadow-lift), var(--shadow-press);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}

.sb-reveal {
  animation: sbRouteIn var(--dur-route) var(--ease-out) both;
}

.sb-route {
  height: 100%;
  min-height: 0;
  animation: sbRouteIn var(--dur-route) var(--ease-out) both;
}

.sb-flow > * {
  animation: sbItemRise var(--dur-soft) var(--ease-out) both;
}

.sb-flow > *:nth-child(1) { animation-delay: 20ms; }
.sb-flow > *:nth-child(2) { animation-delay: 60ms; }
.sb-flow > *:nth-child(3) { animation-delay: 100ms; }
.sb-flow > *:nth-child(4) { animation-delay: 140ms; }
.sb-flow > *:nth-child(5) { animation-delay: 180ms; }
.sb-flow > *:nth-child(6) { animation-delay: 220ms; }
.sb-flow > *:nth-child(7) { animation-delay: 260ms; }
.sb-flow > *:nth-child(8) { animation-delay: 300ms; }
.sb-flow > *:nth-child(9) { animation-delay: 340ms; }
.sb-flow > *:nth-child(10) { animation-delay: 380ms; }
.sb-flow > *:nth-child(n+11) { animation-delay: 420ms; }

.sb-animated-card {
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
  will-change: transform;
}

.sb-animated-card:active {
  transform: translateY(1px) scale(0.995);
}

.sb-gamify-card {
  position: relative;
  overflow: hidden;
  animation: sbSoftPop 560ms var(--ease-out) both;
}

.sb-gamify-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.18) 42%, transparent 62%);
  transform: translateX(120%);
  animation: sbSheen 1800ms var(--ease-out) 220ms both;
}

.sb-xp-orb {
  position: relative;
  animation: sbXpBreathe 2800ms var(--ease-io) infinite;
}

.sb-xp-orb::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  border: 1px solid currentColor;
  opacity: 0;
  animation: sbXpRing 2800ms var(--ease-out) infinite;
}

.sb-progress-track {
  position: relative;
  overflow: hidden;
}

.sb-progress-bar {
  position: relative;
  overflow: hidden;
  transform-origin: right center;
  animation: sbProgressGrow 700ms var(--ease-out) both;
}

.sb-progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.42), transparent);
  transform: translateX(120%);
  animation: sbProgressSheen 1600ms var(--ease-out) 420ms both;
}

.sb-stat-card {
  animation: sbScaleIn 420ms var(--ease-out) both;
}

.sb-message-motion {
  animation: sbItemRise 360ms var(--ease-out) both;
}

.sb-week-bar {
  transform-origin: bottom center;
  animation: sbBarGrow 620ms var(--ease-out) both;
}

.sb-badge-unlocked {
  animation: sbBadgeWake 620ms var(--ease-out) both;
}

.sb-badge-locked {
  animation: sbItemRise 460ms var(--ease-out) both;
}

.sb-streak-chip {
  animation: sbWarmPulse 2200ms var(--ease-io) infinite;
}

.sb-reward-burst {
  position: fixed;
  top: 86px;
  left: 50%;
  z-index: 760;
  direction: rtl;
  pointer-events: none;
  transform: translateX(-50%);
  animation: sbRewardFloat 1650ms var(--ease-out) both;
}

.sb-reward-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 132px;
  justify-content: center;
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--surface-glass);
  color: var(--firoozeh-deep);
  border: 1px solid var(--c-border-sm);
  box-shadow: var(--shadow-float), var(--shadow-press);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  font: 800 15px var(--font-sans);
}

.sb-reward-sub {
  font: 600 11px var(--font-sans);
  color: var(--ink-3);
}

.sb-reward-spark {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--saffron);
  left: 50%;
  top: 50%;
  opacity: 0;
  animation: sbRewardSpark 900ms var(--ease-out) both;
  animation-delay: var(--spark-delay, 0ms);
}

.sb-icon-button:hover {
  background: var(--firoozeh-soft) !important;
  color: var(--firoozeh-deep) !important;
  transform: translateY(-1px);
}

.sb-icon-button:active {
  transform: translateY(0) scale(0.98);
}

.sb-tab-button:hover {
  color: #fff !important;
  transform: translateY(-1px);
}

.sb-tab-button:active {
  transform: translateY(0) scale(0.98);
}

.sb-lift-button:hover {
  transform: translateY(-1px);
}

.sb-lift-button:active {
  transform: translateY(1px) scale(0.99);
}

@media (hover: hover) {
  .sb-animated-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-float), var(--shadow-press);
    border-color: var(--c-border-sm);
  }
}

@keyframes sbRouteIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sbItemRise {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes sbScaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes sbSoftPop {
  0%   { opacity: 0; transform: translateY(12px) scale(0.985); }
  70%  { opacity: 1; transform: translateY(-1px) scale(1.006); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes sbSheen {
  0%   { transform: translateX(120%); opacity: 0; }
  28%  { opacity: 1; }
  100% { transform: translateX(-120%); opacity: 0; }
}

@keyframes sbXpBreathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-1px) scale(1.035); }
}

@keyframes sbXpRing {
  0%, 58%, 100% { opacity: 0; transform: scale(0.86); }
  16%           { opacity: 0.26; transform: scale(1); }
}

@keyframes sbProgressGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes sbProgressSheen {
  from { transform: translateX(120%); }
  to   { transform: translateX(-120%); }
}

@keyframes sbBarGrow {
  from { transform: scaleY(0.18); opacity: 0.45; }
  to   { transform: scaleY(1); opacity: 1; }
}

@keyframes sbBadgeWake {
  0%   { opacity: 0; transform: translateY(12px) scale(0.92); }
  62%  { opacity: 1; transform: translateY(-2px) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes sbWarmPulse {
  0%, 100% { filter: saturate(1); transform: translateY(0); }
  50%      { filter: saturate(1.24); transform: translateY(-1px); }
}

@keyframes sbRewardFloat {
  0%   { opacity: 0; transform: translate(-50%, 12px) scale(0.94); }
  18%  { opacity: 1; transform: translate(-50%, 0) scale(1.02); }
  72%  { opacity: 1; transform: translate(-50%, -4px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -18px) scale(0.98); }
}

@keyframes sbRewardSpark {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}