/* =============================================================
   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 -----------------------------------------------
   Vazirmatn — Persian + Latin sans (primary).
                Self-hosted from fonts/font.ttf (uploaded by brand).
                Only Regular weight is available locally; the @font-face
                below declares the file for the 400 weight and lets the
                browser synthesise 500/600/700 via font-synthesis. If a
                full weight family is uploaded later, replace this block
                with explicit per-weight @font-face rules.
   Geist Mono  — monospace, code/hashes/timestamps. Still loaded from
                Google Fonts CDN — no brand mono was provided.
   ----------------------------------------------------------- */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/font.ttf') format('truetype');
}
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&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 */

  --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);

  /* ===== 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);

  /* ===== 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;

  /* ===== Type — families ===== */
  --font-sans: 'Vazirmatn', sans-serif;
  --font-mono: 'Vazirmatn', 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;

  --ink:    #E8E2D4;
  --ink-2:  #B0A99A;
  --ink-3:  #7F786B;
  --ink-4:  #44403A;

  --firoozeh:      #4DBFB3;
  --firoozeh-deep: #8FD8D2;
  --firoozeh-soft: #0D2624;

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

  --hairline:        1px solid rgba(255, 248, 232, 0.08);
  --hairline-strong: 1px solid rgba(255, 248, 232, 0.16);
  --focus-ring:      0 0 0 2px var(--paper), 0 0 0 4px var(--firoozeh);

  --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);
}

/* =============================================================
   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;
}

/* 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.01em; }
.sb h2, .sb .h2 { font: var(--type-h2); margin: 0; color: var(--fg); letter-spacing: -0.01em; }
.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.02em; }

/* 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.02em; }
.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; }