/* Fouzhan DS v1 — approved 2026-09-21. Attio tokens (attio.com) adapted for Persian/RTL.
   Same primitives, semantic layer, button system, radii, shadows. Changed for Persian:
   font stack, letter-spacing 0, taller line-heights, no uppercase overline. */

:root, .light {
  --blue-100:#e8f0ff; --blue-200:#c8dcff; --blue-300:#94b9ff; --blue-400:#709ff5; --blue-450:#538bf3; --blue-500:#266df0; --blue-600:#245bc2; --blue-800:#1a2233;
  --black-0:#000; --black-50:#101010; --black-100:#1c1d1f; --black-200:#202124; --black-300:#232529; --black-400:#2e3238; --black-500:#383e47; --black-600:#505967; --black-700:#6f7988; --black-800:#8f99a8; --black-900:#a4adba;
  --white-100:#fff; --white-200:#fafafb; --white-300:#f3f4f6; --white-400:#edeff3; --white-500:#e4e7ec; --white-600:#dee2e7; --white-700:#d3d8df; --white-800:#cad0d9; --white-900:#b5bdc9;
  --green-500:#0fc27b; --green-600:#0db472; --red-500:#ff5b59; --red-600:#f65351; --yellow-500:#f5b900; --yellow-600:#dba601; --yellow-700:#ad7c00;

  --bg-primary:var(--white-100); --bg-secondary:var(--white-200); --surface-subtle:var(--white-300); --surface:var(--white-400);
  --stroke-weak:var(--white-400); --stroke-subtle:var(--white-500); --stroke-default:var(--white-700); --stroke-strong:var(--white-800); --stroke-accent:var(--blue-400);
  --fg-primary:var(--black-100); --fg-secondary:var(--black-300); --fg-tertiary:var(--black-600); --fg-accent:var(--black-700); --fg-caption:var(--black-900); --fg-disabled:var(--white-700);
  --fg-link:var(--blue-500); --fg-link-strong:var(--blue-600); --fg-warning:var(--yellow-700);
  --focus-ring:rgba(38,109,240,.3);

  --bp-from:var(--black-200); --bp-to:var(--black-200); --bp-border:var(--black-600); --bp-text:var(--white-300);
  --bp-hover-from:var(--black-600); --bp-hover-to:var(--black-200); --bp-hover-text:var(--white-100);
  --bp-active-from:var(--black-500); --bp-active-to:var(--black-500);
  --bo-bg:var(--white-100); --bo-border:var(--white-800); --bo-text:var(--black-400); --bo-hover-border:var(--black-700); --bo-active-bg:var(--white-300); --bo-active-border:var(--black-500);
  --bg-ghost-hover:var(--white-300); --bg-ghost-active:var(--white-400); --bg-ghost-text:var(--black-400); --bg-ghost-text-hover:var(--black-300);

  --shadow-1:0 1px 3px 0 rgba(0,0,0,.01); --shadow-2:0 2px 4px -1px rgba(0,0,0,.02); --shadow-3:0 4px 8px -2px rgba(0,0,0,.03); --shadow-4:0 8px 16px -4px rgba(0,0,0,.04); --shadow-5:0 16px 32px -8px rgba(0,0,0,.05); --shadow-6:0 32px 64px -16px rgba(0,0,0,.06);
  --shadow-card:0 1px 2px -1px rgba(28,40,64,.08), 0 2px 4px 0 rgba(28,40,64,.04);

  --font-sans:"Vazirmatn","Inter",system-ui,sans-serif;
  --font-display:"Vazirmatn","Inter",system-ui,sans-serif;
  --font-serif:"Vazirmatn",serif; /* placeholder for the Tiempos role — no Persian serif chosen yet */
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,0,0,1); --ease-cubic:cubic-bezier(.65,0,.35,1);
}
.dark {
  --bg-primary:var(--black-50); --bg-secondary:var(--black-100); --surface-subtle:var(--black-300); --surface:var(--black-400);
  --stroke-weak:var(--black-300); --stroke-subtle:var(--black-400); --stroke-default:var(--black-700); --stroke-strong:var(--black-800);
  --fg-primary:var(--white-100); --fg-secondary:var(--white-400); --fg-tertiary:var(--white-900); --fg-accent:var(--black-800); --fg-caption:var(--black-600); --fg-disabled:var(--black-700);
  --fg-link:var(--blue-400); --fg-link-strong:var(--blue-300); --fg-warning:var(--yellow-500);
  --focus-ring:rgba(112,159,245,.6);
  --bp-from:var(--black-400); --bp-to:var(--black-400); --bp-border:rgba(80,89,103,.5); --bp-text:var(--white-400);
  --bp-hover-from:var(--black-500); --bp-hover-to:var(--black-400); --bp-hover-text:var(--white-100);
  --bp-active-from:var(--black-600); --bp-active-to:var(--black-600);
  --bo-bg:var(--black-50); --bo-border:var(--black-400); --bo-text:var(--white-400); --bo-hover-border:var(--black-500); --bo-active-bg:var(--black-300); --bo-active-border:var(--white-100);
  --bg-ghost-hover:var(--black-400); --bg-ghost-active:var(--black-500); --bg-ghost-text:var(--white-500); --bg-ghost-text-hover:var(--white-100);
  color:var(--fg-primary); background:var(--bg-primary);
}

/* base */
.fz{font-family:var(--font-sans);font-size:16px;line-height:26px;font-weight:500;letter-spacing:0;color:var(--fg-primary);background:var(--bg-primary);direction:rtl;text-align:start;-webkit-font-smoothing:antialiased;box-sizing:border-box}
.fz *{box-sizing:border-box}
.fz h1,.fz h2,.fz h3,.fz p{margin:0}
/* :where() keeps these at zero class-specificity so component classes (.btn-*, .nav-link, .f-link) win on anchors */
:where(.fz) a{color:inherit;text-decoration:none}
:where(.fz) a:hover{color:inherit}
.fz svg{flex-shrink:0}
.fz :focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}

/* type */
.t-xs{font-size:12px;line-height:18px;font-weight:500}
.t-sm{font-size:14px;line-height:22px;font-weight:500}
.t-base{font-size:16px;line-height:26px;font-weight:500}
.t-lg{font-size:18px;line-height:28px;font-weight:500}
.t-xl{font-size:20px;line-height:30px;font-weight:500}
.t-2xl{font-size:24px;line-height:34px;font-weight:500}
.h-xs{font-family:var(--font-display);font-size:28px;line-height:38px;font-weight:600}
.h-sm{font-family:var(--font-display);font-size:32px;line-height:42px;font-weight:600}
.h-md{font-family:var(--font-display);font-size:40px;line-height:52px;font-weight:600}
.h-lg{font-family:var(--font-display);font-size:56px;line-height:68px;font-weight:600}
.h-xl{font-family:var(--font-display);font-size:64px;line-height:76px;font-weight:600}
.h-hero{font-family:var(--font-display);font-size:72px;line-height:88px;font-weight:700}
.overline{font-family:var(--font-display);font-size:12px;line-height:18px;font-weight:600;letter-spacing:.04em;color:var(--fg-caption);font-variant-numeric:tabular-nums}
.serif{font-family:var(--font-serif);font-weight:400}
.c-primary{color:var(--fg-primary)} .c-secondary{color:var(--fg-secondary)} .c-tertiary{color:var(--fg-tertiary)} .c-accent{color:var(--fg-accent)} .c-caption{color:var(--fg-caption)} .c-link{color:var(--fg-link)}
.mono{font-family:var(--font-mono)}
.num{font-variant-numeric:tabular-nums}

/* surfaces */
.bg-primary{background:var(--bg-primary)} .bg-secondary{background:var(--bg-secondary)} .bg-surface{background:var(--surface)} .bg-surface-subtle{background:var(--surface-subtle)}
.b-subtle{border-color:var(--stroke-subtle)} .b-weak{border-color:var(--stroke-weak)} .b-default{border-color:var(--stroke-default)}
.rails{border-inline:1px solid var(--stroke-subtle)}
.hr-b{border-bottom:1px solid var(--stroke-subtle)} .hr-t{border-top:1px solid var(--stroke-subtle)}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border:1px solid transparent;cursor:pointer;font-family:inherit;text-decoration:none;gap:6px;height:36px;padding:0 12px;border-radius:10px;font-size:14px;line-height:20px;font-weight:500;transition:color .3s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease),background-image .3s var(--ease)}
.btn:hover,.btn:active{transition-duration:50ms}
.btn:disabled{pointer-events:none;cursor:default}
.btn-sm{height:32px;padding:0 10px;font-size:12px;line-height:18px}
.btn-lg{height:46px;padding:0 14px;border-radius:12px;font-size:16px;line-height:22px;gap:8px}
.btn-icon{width:36px;padding:0} .btn-icon.btn-sm{width:32px} .btn-icon.btn-lg{width:46px}
.btn-primary{background-image:radial-gradient(at center -10%,var(--bp-from) 0%,var(--bp-to) 100%);background-color:var(--bp-from);border-color:var(--bp-border);color:var(--bp-text)}
.btn-primary:hover{background-image:radial-gradient(at center -10%,var(--bp-hover-from) 0%,var(--bp-hover-to) 100%);background-color:var(--bp-hover-from);color:var(--bp-hover-text)}
.btn-primary:active{background-image:radial-gradient(at center -10%,var(--bp-active-from) 0%,var(--bp-active-to) 100%);color:var(--bp-hover-text)}
.btn-primary:disabled{background-image:none;background-color:var(--white-900);border-color:var(--white-900);color:var(--white-100)}
.btn-outline{background:var(--bo-bg);border-color:var(--bo-border);color:var(--bo-text)}
.btn-outline:hover{border-color:var(--bo-hover-border)}
.btn-outline:active{background:var(--bo-active-bg);border-color:var(--bo-active-border);color:var(--fg-secondary)}
.btn-outline:disabled{border-color:var(--stroke-subtle);color:var(--stroke-strong)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--bg-ghost-text)}
.btn-ghost:hover{background:var(--bg-ghost-hover);color:var(--bg-ghost-text-hover)}
.btn-ghost:active{background:var(--bg-ghost-active);color:var(--fg-primary)}
.btn-ghost:disabled{color:var(--white-900)}

/* pills, tags, badges */
.pill{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--stroke-weak);border-radius:13px;padding:5px 11px 5px 7px;background:var(--white-100);font-size:13px;line-height:18px;font-weight:500;color:var(--fg-secondary);transition:border-color .3s var(--ease),background-color .3s var(--ease)}
.pill:hover{background:#fbfbfc}
.tag{display:inline-flex;align-items:center;height:24px;border-radius:8px;padding:0 6px;background:var(--blue-100);color:var(--blue-600);font-size:14px;line-height:20px;font-weight:500}
.dark .tag{background:var(--blue-800);color:var(--blue-200)}
.badge{display:inline-flex;align-items:center;border-radius:10px;padding:2px 6px;font-size:10px;line-height:12px;font-weight:500;background:var(--blue-450);color:var(--white-100)}
.status{display:inline-flex;align-items:center;height:20px;border-radius:6px;padding:0 6px;font-size:12px;line-height:18px;font-weight:500}
.status-green{background:rgba(15,194,123,.14);color:#0a8a58} .status-yellow{background:rgba(245,185,0,.16);color:var(--yellow-700)} .status-blue{background:var(--blue-100);color:var(--blue-600)} .status-grey{background:var(--surface);color:var(--fg-tertiary)} .status-red{background:rgba(255,91,89,.14);color:#c9403e}

/* inputs */
.input{display:block;width:100%;height:42px;border-radius:10px;background:var(--bg-primary);padding:10px 13px;border:1px solid var(--stroke-default);color:var(--fg-secondary);font-family:inherit;font-size:14px;line-height:20px;font-weight:500;outline:none;transition:border-color .3s ease-out,box-shadow .3s ease-out}
.input::placeholder{color:var(--fg-accent)}
.input:hover{box-shadow:0 1px 4px rgba(56,62,71,.1)}
.input:focus-visible{border-color:var(--blue-500);box-shadow:0 0 0 3px var(--blue-300)}
.label{display:block;font-size:14px;line-height:20px;font-weight:500;color:var(--fg-secondary);margin-bottom:6px}

/* cards */
.card{border:1px solid var(--stroke-subtle);border-radius:20px;background:var(--bg-primary);box-shadow:var(--shadow-card)}
.card-flat{border:1px solid var(--stroke-subtle);border-radius:20px;background:var(--bg-primary)}
.list-card{position:relative;display:flex;flex-direction:column;gap:16px;border-inline-start:1px solid var(--stroke-subtle);padding:0 24px;transition:color .3s var(--ease)}
.list-card::before{content:"";position:absolute;inset-block:0;inset-inline-start:-1px;width:1px;background:var(--fg-accent);transform:scaleY(0);transform-origin:bottom;transition:transform .2s cubic-bezier(.33,1,.68,1)}
.list-card:hover::before{transform:scaleY(1);transition-duration:.24s}
.list-card h3{color:var(--fg-secondary);transition:color .3s var(--ease)} .list-card:hover h3{color:var(--fg-primary)}
.check{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:6px;background:var(--surface-subtle);color:var(--fg-accent);flex-shrink:0;margin-top:3px}

/* nav + footer links */
.nav-link{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:10px;font-size:15px;line-height:20px;font-weight:500;color:var(--bg-ghost-text);transition:background-color .3s var(--ease),color .3s var(--ease)}
.nav-link:hover{background:var(--bg-ghost-hover);color:var(--bg-ghost-text-hover);transition-duration:50ms}
.u-hover{background-image:linear-gradient(currentColor,currentColor);background-position:0 91%;background-repeat:no-repeat;background-size:0% .06em;transition:background-size .4s var(--ease-cubic)}
.f-link{display:inline-flex;align-items:center;gap:6px;margin-inline:-4px;padding:4px;border-radius:8px;font-size:14px;line-height:22px;font-weight:400;color:var(--fg-tertiary);transition:color .15s ease-out}
.f-link:hover{color:var(--fg-secondary)} .f-link:hover .u-hover{background-size:100% .06em;transition-duration:.15s}
.f-link:active{color:var(--fg-primary)}

/* accordion */
.acc{border-bottom:1px solid var(--stroke-weak);padding:28px 0}
.acc-btn{display:flex;width:calc(100% + 16px);margin:-6px -8px;padding:6px 8px;border-radius:12px;align-items:flex-start;justify-content:space-between;gap:24px;background:none;border:0;cursor:pointer;font-family:inherit;font-size:16px;line-height:26px;font-weight:600;color:var(--fg-secondary);text-align:start}
.acc-body{padding-top:12px;font-weight:400;color:var(--fg-tertiary)}

/* panel mock (app-style UI) */
.win{border:1px solid var(--stroke-subtle);border-radius:16px;background:var(--bg-primary);box-shadow:var(--shadow-1),var(--shadow-2),var(--shadow-3),var(--shadow-4),var(--shadow-5),var(--shadow-6);overflow:hidden}
.side-item{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px;border-radius:8px;font-size:13px;line-height:18px;font-weight:500;color:var(--fg-secondary)}
.side-item.on{background:var(--surface);color:var(--fg-primary)}
.tbl{width:100%;border-collapse:collapse;font-size:13px;line-height:18px;font-weight:500}
.tbl th{font-weight:500;color:var(--fg-accent);text-align:start;padding:8px 12px;border-bottom:1px solid var(--stroke-subtle);background:var(--bg-secondary)}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--stroke-weak);color:var(--fg-secondary);white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.chip{display:inline-flex;align-items:center;height:24px;border:1px solid var(--stroke-subtle);border-radius:8px;padding:0 8px;font-size:12px;line-height:18px;color:var(--fg-tertiary);background:var(--bg-primary)}